Having written an article about grid and been lazy for a while, let’s talk about Flex today.

display:flex

To use Flex, you first set the display property of the container to flex or inline-flex. Convert it to a Flex container.

  • Flex: Block felx
  • Inline-flex: inline flex

First we prepare a set of containers for use:

<div class="flex">
    <div class="item i1">1</div>
    <div class="item i2">2</div>
    <div class="item i3">3</div>
    <div class="item i4">4</div>
    <div class="item i5">5</div>
    <div class="item i6">6</div>
    <div class="item i7">7</div>
    <div class="item i8">8</div>
    <div class="item i9">9</div>
</div>
Copy the code
.flex .item{
    width: 100px;
    border: 1px solid blue;
}
Copy the code

At this point, the page looks like this:

And then we set the display of.flex to flex,

.flex{
    display: flex;
}
Copy the code

Page into

Why is that? There are some default attributes and values that take effect when an element is set up as a Flex container. This causes the child divs –.item, or flex elements, to become flex-direction attributes that are aligned horizontally. Its default value is row, which is horizontal. And with that said, let’s introduce him.

Before we do that, let’s understand two concepts: axis and start-stop line

Axis and start-stop line

The Flex container has two axes, the main axis and the cross axis. The main axis is determined by the flex-direction value. The default value row indicates that the main axis is from left to right. The start and end lines are left and right, and end left and right. (This article deals only with LTR; RTL does the opposite, ending right and left.) The direction of the cross axis is from top to bottom, and the start and end lines are from top to bottom. With that in mind we can move on.

flex-direction

Flex-direction has four values:

  • Row main axis from left to right, cross axis from top to bottom
  • Row-reverse main axis from right to left, cross axis from top to bottom
  • The column axis goes from top to bottom, and the cross axis goes from left to right
  • Column-reverse axes run from bottom to top and cross axes run from left to right

Here’s how the four values correspond:

The default values for the Flex container include: flex-direction:row

  • The element starts at the beginning of the main axis.
  • Elements do not stretch in the main axis – element attributesflex-grow:0, but you can shrink — element attributesflex-shrink:1.
  • Elements are stretched on the cross axis — container propertiesalign-items: stretch;
  • Element does not wrap — container propertyflex-wrap:nowrap
  • flex-basis:auto

Let’s get to know them one by one.

flex-shrink

Flex-shrink defines a shrinking rule for elements, with a value of a non-negative integer and a default value of 1. To see the effect, we first set the width of the container to less than the value of the total elements

.flex{
    display: flex;
    width: 600px;
}
Copy the code

The effect is as follows:

As you can see, all the elements immediately shrink and remain the same width. Because the flex-shrink value for all elements is the default value of 1, they shrink by the same percentage. What if you change the value of one of the elements?

.i1{
    flex-shrink: 2;
}
.i2{
    flex-shrink: 3;
}
Copy the code

For ease of calculation, let’s first remove the border, let’s have a look:

You can see that i1 has a width of 50, i2 has a width of 25, and everything else has a width of 75. How do you figure that out? The original total element length was 100*9=900; now the container length is 600. By 300. The margin of reduction is within 300px, and is calculated as follows: 300 divided by the sum of the total shrink. The top value is 2+3+1 x 7, and the other seven values are 1 by default. Three hundred divided by twelve is twenty-five. Subtracting the initial width of the element (the shrink value is multiplied by 25) gives the width of i1 to 100-25*2=50, and the width of i2 to 100-25*3=25. The conclusion is as follows:

Element initial width - (original width of all elements - now width of all elements)/total shrink of all elements and value * element shrink value

But when this value is very small, the element retains its minimum width (the text width in the example).

If flex-Shirink is 0, it will not shrink.

How do we calculate if we add border? First we need to calculate the width of the content by adding the difference plus the sum of the border — in fact, the original width of all elements – (now the total width of all elements -border). Finally we need to add the border to the calculated value. For example, 300+18= 318,318/12 =26.5, I1:100-26.5 *2+1+1=49, i2:100-26.5*3+1+1=22.5.

flex-grow

Use to set the enlargement rule for an element, dividing the extra space by the sum of flex-grow and adding it to the original element. As mentioned above, flex-grow defaults to 0 and does not zoom in. Let’s change a few elements:

.flex{
    display: flex;
    width: 1200px;
}
.i1{
    flex-grow: 2;
}
.i2{
    flex-grow: 3;
}
Copy the code

Total width 1200, original width 900, extra 300, divided into 2+3=5, each 60px, so the final width of I1 is 100+60*2=220, i2 is 100+60*3=280

flex-basis

Flex-basis sets the size of an element along the main axis. For example, if the flex-direction value is row[-reverse], it is equivalent to width. Column [-reverse] equals height. When flex-basis (non-auto) exists at the same time as width and height, flex-basis has a higher priority. If the value is auto, width and height are used. The above examples are all default values auto, so I won’t repeat them here.

When the flex-basis value is 0, the element keeps the minimum width that it can display, and the rest is surplus space that can be used for flex-grow or Flex-shrink calculations.

It has been reported that some browsers have problems with 0. Try using 0% instead.

flex-wrap

Used to control whether to wrap when an element is exceeded.

  • Nowrap does not break lines, default
  • Wrap the multi-line
  • Warp-reverse is multiple lines, but swaps the starting and ending points of the intersecting axes

Let’s change the flex-wrap value of the Flex container:

.flex{
    display: flex;
    width: 600px;
    flex-wrap: wrap;
}
Copy the code

flex-flow

This is an abbreviation of flex-direction and flex-wrap, for example :flex-flow:row wrap;

flex

It is the short form of flex-grow, flex-shrink, or flex-basis. For example: Flex :1 1 0 this property has four predefined properties:

  • So initial is equal to 0, 1 auto
  • Auto is equal to 1, 1 auto
  • None equals 0 0 Auto
  • Value equivalent to value 1 0% as follows:flex:11 1 0%

order

The value is an integer that can be used to change the order of elements. The default value is 0. Small values precede large values. The Settings are as follows:

.i1{
    order:2
}
.i3{
    order: -2
}
Copy the code

The effect is as follows:

gap

The gap with the grid sets the spacing between two elements:

.flex{
    gap:30px
}
Copy the code

The effect is as follows:

justify-content

Use to set the alignment of elements on the main axis. (Mouth is element, — is blank)

  • Flex – start spindle starting line alignment | word of mouth – – – |
  • The flex – end shaft end line alignment | — – | word of mouth
  • Center center | –, word of mouth – |
  • About space – between the same spacing between elements, element next to | | – – – – mouth mouth mouth on both sides
  • Space – both side around elements have the same spacing | – mouth, mouth, mouth – |
  • Space – evenly between elements, elements, the same as the distance between the edge | – mouth, mouth, mouth – |

align-items

Used to set the alignment of elements on the cross axis.

  • Flex-start Cross axis start line alignment
  • Flex-end cross axis terminating line alignment
  • Center in the middle
  • Stretch Indicates the stretch supplement. Default value.

The Stretch effect allows you to set the Flex container height to 100px and see that the height of the element fills the entire height. But elements that have their own size limits do not stretch.

align-content

Used to set the alignment of multiple lines relative to the container when there are multiple lines, and its value contains all of the above illustration-content and align-items values. It’s the same, so let’s go through it

align-self

Used to control the alignment of individual elements. Overrides the value of align-items.

Set the container align-items to Center and i1’s align-self to flex-start. The effect is as follows:

Align-content has high priority when multiple lines are measured, and align-self cannot override its value.

Hoo ~, can be happy to play. Slipped to slip