preface

Since I have been developing b-side projects, I have basically developed them based on the existing component library, and I rarely write style layouts manually. Recently, I got a mobile side project, so I just need to check and fill in the gaps. I hope I can also help you with some small drops

flex

Display: Flex allows elements in a container to be enlarged or shrunk in a Flexible space. Flexbox is a one-dimensional layout that provides very powerful spatial distribution and alignment. But only one latitude of a row or column can be handled. Any container can be specified as a Flex layout, using display: inline-flex.

When set to Flex, the float, clear, and vertical-align attributes of child elements are invalidated.Copy the code

Properties of an elastic container

  • flex-direction

The Flex layout consists of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction attribute, and the other axis is perpendicular to it. Since we have a one-dimensional layout, all flex attributes are related to these two axes. Flex-direction has four values:

.item {
	flex-direction: "row" | "row-reverse" | "column" | "column-reverse";
}
Copy the code

The first two spindles extend laterally and the last two longitudinally.

  • flex-wrap

By default, the element inside the elastic box is on a line, and the default is not line wrap. The flex-wrap attribute defines how to wrap a line if a row does not fit. There are three values:

.item {
	flex-wrap:"nowrap" | "wrap" | "wrap-reverse";
}
Copy the code

They are no line feed, down line feed and up line feed respectively.

  • flex-flow

Is a shorthand for the two properties above:

.item {
	flex-flow: "flex-direction" | "flex-wrap";
}
Copy the code

The default is Row nowrap

  • justify-content | align-items | align-content

These three attribute definitions define the alignment of elements in an elastic box on main and cross axes and multiple axes, respectively. We can use the first two attributes to achieve simple horizontal and vertical centering of elements:

.item {
    display:flex;
    justify-content:center;
    align-items: center;
}
Copy the code

Implement-content has five properties:

.item {
	justify-content: "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
}
Copy the code

Align them left, right, center, and both in the same order, with the elements equally spaced and each item equally spaced, so that the distance between the two sides looks smaller than the middle.

Align-items have five properties:

.item {
	algin-items: "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
}
Copy the code

Set the height of the container for fill, the start alignment of the cross axis, the end alignment of the cross axis, the midpoint alignment of the cross axis, and the bottom alignment of the first line of text in order.

Algin-content defines the alignment of multiple trailing axes, which does not work with only one axis, and has six properties:

.item {
	algin-content: "stretch" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
}
Copy the code

The axis occupies the entire cross axis in order, the starting point of the cross axis is aligned, the end point of the cross axis is aligned, the midpoint of the cross axis is aligned, the distance between the two ends is bisected, the distance between the two axes is bisected, so that the two sides look smaller than the middle.

Attributes of elastic elements

  • order

The elements in the elastic container are ordered according to the order. The value is an integer, and the smaller the value, the higher the value. The default value is 0.

.item {
	order: "Integer"; }Copy the code

  • flex-grow | flex-shrink | flex-basis

Before I talk about the three properties, I’ll talk about two concepts: positive free space, negative free space, and negative free space.

In the case of these two pictures, the 500px elastic container, the extra 200px on the top is the rest, and the extra 100px on the bottom is the excess.

Why are these two concepts introduced?

Flex child elements do not grow without positive free space and do not shrink without negative free space. That is, if the total width of all our elements is smaller than the total width of the container, our flex-grow will take effect, whereas if the total width of all our elements is greater than the total width of the container, our Flex-grow will take effect.

flex-grow

This property defines the scaling of Flex elements within the container, which defaults to 0, meaning no scaling.

.item {
	flex-grow: "number";
}
Copy the code

If we define an element’s flex-grow property, and the elastic container has free space, our element will allocate the remaining space according to the flex-grow property.

HTML part:

<div class="container">
        <div class="one">A<br>width:100px<br>flex-grow:1</div>
        <div class="two">B<br>width:200px<br>flex-grow:2</div>
        <div class="three">C<br>width:150px<br>flex-grow:3</div>
</div>
Copy the code

The CSS part:

 * {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 600px;
        height: 300px;
        display: flex;
        border: 2px dotted # 333333;
        margin: 0 auto;
    }
    .container > div {
        text-align: center;
    }
    .one {
        width: 100px;
        flex-grow: 1;
        background-color: #ff4466;
    }
    .two {
        width: 200px;
        flex-grow: 2;
        background-color: #42b989;
    }
    .three {
        width: 150px;
        flex-grow: 3;
        background: #61daff;
    }
Copy the code

Effect:

Take A as an example, the actual width of A is width + A/ (A+B+C) * X, ABC is the flex-grow value of the three elements, X is the size of the remaining space, width is the previous width, and then calculate the actual width of ABC as follows: 125px, 250px, 225px. You can try it yourself.

flex-shrink

This attribute defines the scaling of the element, which defaults to 1 and shrinks if there is overflow space.

.item {
	flex-shrink: "number";
}
Copy the code

If we define a flex-shrink attribute for an element and the elastic container has an excess space, our element will shrink according to Flex-shrink.

HTML part:

<div class="container">
        <div class="one">A<br>width:300px<br>flex-shrink:1</div>
        <div class="two">B<br>width:300px<br>flex-shrink:2</div>
        <div class="three">C<br>width:300px<br>flex-shrink:3</div>
</div>
Copy the code

The CSS part:

    * {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 600px;
        height: 300px;
        display: flex;
        border: 2px dotted # 333333;
        margin: 0 auto;
    }
    .container > div {
        text-align: center;
    }
    .one {
        width: 300px;
        flex-shrink: 1;
        background-color: #ff4466;
    }
    .two {
        width: 300px;
        flex-shrink: 2;
        background-color: #42b989;
    }
    .three {
        width: 300px;
        flex-shrink: 3;
        background: #61daff;
    }
Copy the code

Effect:

The calculation method is as follows: take A as an example, first calculate the weight of compression, that is, the coefficient, ABC is the flex-shrink value, the weight: Weight = A * w1 + B * w2 + C * w3,X is the extra space, so the actual width of A is 300-(300/1800)*300 = 250px, which is the original width minus the compression ratio times the extra space. The calculation of compression ratio is A * w1 / weight, for example. The rest comes down to 200px and 150px, and you can do it yourself.

flex-basis

This property defines the main size that an element occupies before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, which is the original size of the project.

.item {
	flex-basis: "length" | "auto";
}
Copy the code

< span style = “box-sizing: border-box; color: RGB (51, 51, 51); line-height: 22px; font-size: 14px! Important; word-wrap: inherit! Important;”

HTML part:

<div class="container">
        <div class="box one">A</div>
        <div class="box two">B</div>
        <div class="box three">C</div>
</div>
Copy the code

The CSS part:

   * {
        margin: 0;
        padding: 0;
    }
    .container {
        width: 600px;
        height: 300px;
        display: flex;
        border: 2px dotted # 333333;
        margin: 0 auto;
    }
    .box {
        text-align: center;
    }
    .one {
        width: 100px;
        flex-basis: 150px;
        background-color: #ff4466;
    }
    .two {
        max-width: 50px;
        width: 100px;
        flex-basis: 200px;
        background-color: #42b989;
    }
    .three {
        width: 100px;
        background: #61daff;
    }
Copy the code

Effect:

Min /max-width > flex-basis > width

  • align-self

This property controls how a single element is aligned differently from other elements. It overrides the align-items property of the parent element, which inherits from the parent element by default, auto, or stretch if there is no parent element

.item {
	align-self: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"
}
Copy the code

This property applies primarily to child elements, which have exactly the same characteristics as align-items except that auto is a bit special.

Browser support

The actual use

We use the concept of layout a lot in our daily development. It’s very easy to navigate to the top or bottom when we have Flex, just set the content to flex: 1 === Flex: The only scalable space will push the footer down to the bottom of the footer. For example, the horizontal and vertical center mentioned in the beginning, as well as some media object processing, we will use Flex, so we need to think about this

Write in the back

(Personal study notes, grid next update ~)

The resources

Flex Layout tutorial by Yifeng Ruan

Flex MDN

Understand flex-grow, flex-shrink, and flex-basis in depth