Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

When writing flex layouts today, how exactly do flex properties in CSS work?

Flex is short for flex-grow, flex-shrink, and flex-basis. The most common form in development is flex: 1, which means that a Flex project expands and fills the available space.

flex-grow

The Flex-Grow property defines the project’s zoom scale, which defaults to 0, or no zoom if there is free space. Flex-grow accepts only an integer value.

 <style>
    .wrapper {
      display: flex;
      flex-wrap: wrap;
    }
    .box-1 {
      /* flex-grow: 1; * /
      height: 40px;
    }
    .item-1 {
      background-color: antiquewhite;
    }
    .item-2 {
      background-color: aqua;
    }
    .item-3 {
      background-color: burlywood;
    }
  </style>

  <body>
    <div class="wrapper">
        
      <div class="box-1 item-1">22</div>
        
      <div class="box-1 item-2">2222222222</div>
        
      <div class="box-1 item-3">222222222222222222222</div>
    </div>
  </body>
Copy the code

Flex-grow affects the width or height, depending on the Flex-direction attribute. For the example above, the default flex-direction value is row. Without flex-grow, the Flex project width defaults to the initial width, but flex-grow: 1 is used; The Flex project averages the amount of free space left.

Do not use flex-grow: 1;Results:

use flex-grow: 1;Results:

When I look at the width of the console, I find that the width of the three divs is different. Consider this formula:

Project width = ((flex-grow/total flex-Grow number) * free space) + initial project width

Question 1: Div in flex layoutflex-growCan it be different?

Div flex-grow = 2

Before the change: After the change:

Question 2:flex-growCould it be 0?

Yes, since the flex-grow property accepts integer values, it is possible to use 0:

This setting also prevents the div from taking up the remaining space, keeping its original width.

Question 3: Does the Flex project average the remaining available space?

No, a common misconception is that using flex-grow causes each div to be the same width. This is a misconception. Flex-grow allocates free space, and you can see from the formula that the width of each div is calculated based on the initial width. You can use flex-basis.

flex-shrink

The Flex-shrink attribute defines the shrink scale of the project, which defaults to 1, meaning that divs shrink when there is insufficient space.

  • When the sum of all div widths is less than the outer width
  • The window width is equal to less than the div

Explanation: As shown in the figure, the width of div is 1000 when the window width is greater than 1000, and the width of div is equal to the width of the window when the window width is less than 1000

flex-basis

The flex-basis attribute defines how much space a div occupies on its main axis before allocating space. The browser uses this attribute to calculate whether the main axis has extra space. The default value is auto, which is the size of the div itself.

Flex-basis can be set to the same value as the width or height attribute (such as 1000px, the default is auto), and the project will occupy a fixed space.

For example: set div here toflex-basis: 50%;That will beflex-growReset to 0 to prevent the width from exceeding50%.

 .item-2 {
      /* width: 1000px; * /
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 50%;
      background-color: aqua;
    }
Copy the code

Another example: With Flex-basis set to 100%, that div is on a single line and the rest of the div is wrapped.

 .item-2 {
      /* width: 1000px; * /
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 100%;
      background-color: aqua;
    }
Copy the code

conclusion

The relative size of Flex

The size of div depends on the size of the content

.item {
  flex: auto; // flex-grow:0; flex-shrink:1; flex-basis:auto;
}
Copy the code

Absolute size of Flex

The size of div remains the same

.item {
  flex: 1; // flex-grow:0; flex-shrink:1; flex-basis:0%;
}
Copy the code

Once you understand the flex properties, it is recommended to use the shorthand:

It is recommended that developers use the Flex shorthand to control flexibility, rather than directly using its common properties, because the shorthand will correctly reset any unspecified component to suit common scenarios.