Conscience! After reading this article on Flex layout, you should have no doubt

Editor’s note: This tutorial is a complete and systematic tutorial on Flex layout. For those who are already familiar with Flex layout, it is recommended that you jump directly to the flex-grow and Flex-shrink properties section. You will see points that you did not notice before.

0. Complete video tutorial:

Bilibilie: A masterpiece of conscience! Ultra fine Flex elastic layout full resolution

1. Meet the flex

First, let’s take a look at a few examples of how flex layout differs from previous native CSS layouts.

Common style

 body {
   margin: 30px;
   padding: 0;
 }
 .box {
   width: 70%;
   height: 300px;
   background-color: wheat;
   border: 1px solid purple;
   margin-bottom: 30px;
   box-sizing: border-box;
 }
 .item {
   width: 100px;
   height: 100px;
   background-color: red;
   border: 1px solid blue;
   box-sizing: border-box;
 }
Copy the code

Easily center elements horizontally and vertically

<div class="box box1">
  <div class="item"></div>
</div>
Copy the code

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

Display effect of goods list (goods on both sides of each line are close to the border, with equal spacing between goods)

<div class="box box2">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
Copy the code

.box2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
}
.item {
  margin-bottom: 10px;
}
Copy the code

The classic layout of a web page, with the height of the head and bottom spread out with the content, and the main area covering the remaining height

<div class="container1">
  <div class="header">
    header Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui numquam quam cumque maiores accusantium 
  </div>
  <div class="main">
    main
  </div>
  <div class="footer">
    footer Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam eligendi provident obcaecati quis dignissimos excepturi nostrum unde numquam officiis illo ipsam a velit, ad pariatur possimus! Sed expedita nihil sint!
  </div>
</div>
Copy the code

.container1 {
  height: 300px;
  background-color: brown;
  margin-bottom: 30px;

  display: flex;
  flex-direction: column;
}
.header..main..footer {
  width: 100%;
  border: 1px solid blue;
  box-sizing: border-box;
}
.header..footer {
  background-color: wheat;
}
.main {
  background-color: pink;

  flex: 1;
}
Copy the code

The submit button is fixed in width and the input box occupies all remaining width

<div class="container2">
  <input class="txt" type="text">
  <button class="btn">submit</button>
</div>
Copy the code

.container2 {
  width: 90%;
  background-color: pink;
  padding: 10px;
  margin: 10px auto;

  display: flex;
}
.btn {
  width: 100px;
}
.txt {
  flex: 1;
}
Copy the code

2. Flex’s core design ideas

From the above figure, we can summarize the following points:

Flex is aOne dimensional layoutThe Flex layout can only handle one dimensional element layout at a time, one row or one column.
throughdisplay: flex;Set the parent element of the element that needs to be centered to the Flex container
Two key concepts: parent containercontainerAnd subprojectsitem
The spindle by defaultFrom left to right(Chinese characters are written from left to right), but alsoThe inline textDirection of arrangement.
The side axis is perpendicular to the main axis by defaultFrom top to bottomAnd at the same timeBlock, block boxesThe arrangement direction of.

3. Parent container property: flex-direction

Flex-direction: sets the spindle direction
- Row: the main axis extends along the inline direction (inline: the direction of writing text, Chinese characters from left to right)
- Row-reverse: Inline reverse direction from right to left
- Column: the direction in which the spindles are aligned along the block (display: block box, top down)
- Column-reverse: indicates that the reverse direction of the block is bottom-up
Inversion is not just a change in position, but also a reversal of the order of subitems.

 <style>
   body {
     margin: 0;
     padding: 0;
     display: flex;
     flex-wrap: wrap;
     margin: 100px;
   }
   div {
     box-sizing: border-box;
     border-radius: 5px;
   }
   .box {
     width: 500px;
     height: 200px;
     background-color: #ffffff;
     border: 1px solid #ddd;
     box-shadow: 0px 1px 10px 1px #ddd;
     margin: 10px;
     display: flex;
   }
   .item {
     width: 100px;
     height: 50px;
     background-color: red;
     text-align: center;
     line-height: 50px;
     font-size: 26px;
   }
   .item:nth-child(1) {
     background-color: antiquewhite;
   }
   .item:nth-child(2) {
     background-color: lightblue;
   }
   .item:nth-child(3) {
     background-color: red;
   }
   .item:nth-child(4) {
     background-color: yellow;
   }
 </style>

 <style>
   .box1 {
      flex-direction: row;
   }
 </style>
 <div class="box box1">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
 </div>

 <style>
   .box2 {
     flex-direction: row-reverse;
   }
 </style>
 <div class="box box2">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
 </div>

 <style>
   .box3 {
     flex-direction: column;
   }
 </style>
 <div class="box box3">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
 </div>

 <style>
   .box4 {
     flex-direction: column-reverse;
   }
 </style>
 <div class="box box4">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
 </div>
Copy the code

Remove the width and height of the item element

 .item {
   background-color: red;
   text-align: center;
   line-height: 50px;
   font-size: 26px;
 }
Copy the code

Without setting the width and height, the size of the subproject in the main axis is the size of the content spread, and in the side axis will fill the entire space.

4. Parent container property: context-content

Context-content: Sets the alignment of subitems along the main axis
- Flex-start: default, aligned along the starting point of the spindle
- Flex-end: align along the endpoint of the spindle
- Center: center aligned along the main axis
- Space-between: distributed along the spindle blank center, with edges on both sides
- Space-around: a blank distribution along the main axis
- Space-instituted: evenly evenly spaced along the spindle

<div class="box box1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="box box2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="box box3">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="box box4">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="box box5">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="box box6">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
Copy the code

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
}
div {
  box-sizing: border-box;
  border-radius: 5px;
}
.box {
  width: 500px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0px 1px 10px 1px #ddd;
  margin: 10px;
  display: flex;
}
.item {
  width: 100px;
  height: 50px;
  background-color: red;
  text-align: center;
  line-height: 50px;
  font-size: 26px;
  color: #fff;
}

.box1 {
  justify-content: flex-start;
}
.box1 > .item {
  background-color: red;
}

.box2 {
  justify-content: flex-end;
}
.box2 > .item {
  background-color: blue;
}

.box3 {
  justify-content: center;
}
.box3 > .item {
  background-color: purple;
}

.box4 {
  justify-content: space-between;
}
.box4 > .item {
  background-color: brown;
}

.box5 {
  justify-content: space-around;
}
.box5 > .item {
  background-color: chocolate;
}

.box6 {
  justify-content: space-evenly;
}
.box6 > .item {
  background-color: indigo;
}
Copy the code

5. Parent container property: align-items

Align-items: Sets the alignment of a single line of sub-items along the side axis
- Flex-start: Align along the starting point of the side axis. (Height spread with content)
- Center: center aligned along the side axis. (Height spread with content)
- Flex-end: align along the end of the side axis. (Height spread with content)
- Stretch: Stretches the entire container along the side axis. (If the height is not set, it will stretch; if the height is set, it will be fixed)
- Baseline: align along the baseline. (Height spread with content)
- Normal: default value. Equivalent to stretch.

First 5 subitems set width only, not height last subitem set width and height at the same time

<div class="box box1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="box box2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="box box3">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="box box4">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="box box5">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="box box6">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
Copy the code

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
}
div {
  box-sizing: border-box;
  border-radius: 5px;
}
.box {
  width: 500px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0px 1px 10px 1px #ddd;
  margin: 10px;
  display: flex;
}
.item {
  width: 100px;
  background-color: red;
  text-align: center;
  font-size: 26px;
  color: #fff;
}

.box1 {
  align-items: flex-start;
}
.box1 > .item {
  background-color: red;
}

.box2 {
  align-items: flex-end;
}
.box2 > .item {
  background-color: blue;
}

.box3 {
  align-items: center;
}
.box3 > .item {
  background-color: purple;
}

.box4 {
  align-items: stretch;
}
.box4 > .item {
  background-color: brown;
}

.box5 {
  align-items: baseline;
}
.box5 > .item {
  background-color: chocolate;
}
.box5 > .item:nth-child(1) {
  font-size: 66px;
}
.box5 > .item:nth-child(3) {
  font-size: 96px;
}
.box6 {
  align-items: normal;
}
.box6 > .item {
  background-color: goldenrod;
  height: 50px;
}
Copy the code

6. Parent container property: flex-wrap

Flex-wrap: Sets whether a subproject element is wrapped
- Nowrap: Default, no line breaks. (Subitems that do not have enough space in the container are scaled to fit the width.)
- -Leonard: Wrap. (If it is set to line feed, it will be rendered at the width set. If there is not enough space, line feed will be performed.)
- Wrap-reserve: wrap and reverse

If no height is set, the sum of the height of the subitems in the side axis will fill the entire container (single full, multiple height full).

<div class="box box1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box3">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
Copy the code

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
}
div {
  box-sizing: border-box;
  border-radius: 15px;
  border: 1px solid #ddd;
  box-shadow: 0px 1px 10px 1px #ddd;
}
.box {
  width: 500px;
  height: 200px;
  background-color: #ffffff;
  margin: 10px;
  display: flex;
}
.item {
  width: 100px;
  background-color: pink;
  text-align: center;
  /* line-height: 50px; * /
  font-size: 26px;
  color: #fff;
}

.box1 > .item {
  background-color: purple;
}

.box2 {
  flex-wrap: wrap;
}
.box2 > .item {
  background-color: magenta;
}

.box3 {
  flex-wrap: wrap-reverse;
}
.box3 > .item {
  background-color: maroon;
}
Copy the code

7. Parent container property: align-content

Align-content: Sets the alignment of multiple subitems on the side axis (similar to justify-content).
- Flex-start: default, aligned along the starting point of the side axis. (Height spread with content)
- Center: center aligned along the side axis. (Height spread with content)
- Flex-end: align along the end of the side axis. (Height spread with content)
- Space-between: the blank distribution along the lateral axis is centered, with edges on both sides. (Height spread with content)
- Space-around: distributed blank along the side axis. (Height spread with content)
- Space-instituted: evenly spaced along the lateral axis. (Height spread with content)
- Stretch: height when automatic, the height of all subitems and the height of the parent container. Setting the height will render at a fixed height, and the occupied height will not change, unlike Flex-start
- Normal: default value. Equivalent to stretch

<div class="box box1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box3">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box4">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box5">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box6">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box7">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box8">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box9">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box10">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
Copy the code

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
  justify-content: center;
}
div {
  box-sizing: border-box;
  border-radius: 10px;
}
.box {
  width: 500px;
  height: 110px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0px 1px 10px 1px #ddd;
  margin: 10px;

  display: flex;
  /* Set all boxes to wrap */
  flex-wrap: wrap;
}
.item {
  width: 100px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}


.box1 {
  align-content: flex-start;
}
.box1 > .item {
  background-color: magenta;
}

.box2 {
  align-content: center;
}
.box2 > .item {
  background-color: maroon;
}

.box3 {
  align-content: flex-end;
}
.box3 > .item {
  background-color: orange;
}

.box4 {
  align-content: space-between;
}
.box4 > .item {
  background-color: sienna;
}

.box5 {
  align-content: space-around;
}
.box5 > .item {
  background-color: violet;
}

.box6 {
  align-content: space-evenly;
}
.box6 > .item {
  background-color: salmon;
}

.box7 {
  align-content: stretch;
}
.box7 > .item {
  background-color: purple;
}

.box8 {
  align-content: normal;
}
.box8 > .item {
  background-color: orchid;
}

.box9 {
  align-content: stretch;
}
.box9 > .item {
  background-color: purple;
  height: 30px;
}

.box10 {
  align-content: normal;
}
.box10 > .item {
  background-color: orchid;
  height: 30px;
}
Copy the code

8. Parent container property: flex-flow

Flex-flow: short properties of flex-direction and flex-wrap, in any order.

<div class="box box1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
<div class="box box2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
Copy the code

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
  justify-content: center;
}
div {
  box-sizing: border-box;
  border-radius: 10px;
}
.box {
  width: 500px;
  height: 110px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0px 1px 10px 1px #ddd;
  margin: 10px;

  display: flex;
}
.item {
  width: 100px;
  height: 30px;
  background-color: pink;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

.box1 {
  flex-flow: column wrap;
}
.box1 > .item {
  background-color: purple;
}

.box2 {
  flex-flow: wrap row-reverse;
}
.box2 > .item {
  background-color: magenta;
}
Copy the code

9. Subitem attribute: align-self

Align-self: Overrides the property value of the align-items set above the parent container
- Auto: the default value, which follows the align-items property value of the parent container
- Flex-start, Center, Flex-end, Stretch, baseline have the same effect as align-items

The subproject only sets the width, not the height

<div class="box box1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
Copy the code

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
}
div {
  box-sizing: border-box;
  border-radius: 5px;
}
.box {
  width: 600px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0px 1px 10px 1px #ddd;
  margin: 10px;
  display: flex;
}
.item {
  width: 100px;
  background-color: red;
  text-align: center;
  font-size: 26px;
  color: #fff;
}

.box1 {
  align-items: flex-start;
}
.box1 > .item:nth-child(1) {
  align-self: center;
}
.box1 > .item:nth-child(2) {
  align-self: flex-end;
}
.box1 > .item:nth-child(3) {
  align-self: stretch;
}
.box1 > .item:nth-child(4) {
  font-size: 66px;
  align-self: baseline;
}
.box1 > .item:nth-child(5) {
  font-size: 36px;
  align-self: baseline;
}
Copy the code

10. Subproject attributes: Order

Order: Sets the order of subitems
- Default value: 0
- The value can be a positive integer, a negative integer, or 0. The smaller the value, the earlier the value

<div class="box box1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
Copy the code

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
}
div {
  box-sizing: border-box;
  border-radius: 15px;
}
.box {
  width: 600px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0px 1px 10px 1px #ddd;
  margin: 10px;
  display: flex;
}
.item {
  width: 100px;
  background-color: red;
  text-align: center;
  color: #fff;
}
.box1 > .item:nth-child(1) {
  font-size: 26px;
  order: -1;
}
.box1 > .item:nth-child(2) {
  font-size: 16px;
  order: -2;
}
.box1 > .item:nth-child(3) {
  font-size: 56px;
  order: 1;
}
.box1 > .item:nth-child(4) {
  font-size: 36px;
}
.box1 > .item:nth-child(5) {
  font-size: 66px;
  order: 2;
}
Copy the code

11. Subproject attributes: Flex-basis

Flex-basis: Sets the initial size of the subproject on the main axis
- Auto: default value, equivalent to no flex-basis value
- Possible value: The value cannot be negative

Priority: min-width/max-width > flex-basis >width >width

<div class="box box1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
Copy the code

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
}
div {
  box-sizing: border-box;
  border-radius: 15px;
}
.box {
  width: 600px;
  height: 100px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0px 1px 10px 1px #ddd;
  margin: 10px;
  display: flex;
}
.item {
  text-align: center;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
}
.box1 > .item:nth-child(1) {
  background-color: red;
}
.box1 > .item:nth-child(2) {
  background-color: yellow;
  flex-basis: 200px;
}
.box1 > .item:nth-child(3) {
  background-color: blue;
  min-width: 300px;
  flex-basis: 200px;
  width: 100px;
}
Copy the code

12. Subproject attributes: Flex-grow

Flex-grow: Defines the stretch factor for the subproject
- Default to 0(default to free space without stretching)
- The value can be a positive integer, decimal, or 0. It cannot be negative.
- This attribute value is valid only if the parent container has free space
- Note: It is important to make it clear that flex-grow and flex-basis work together to get the final width value
- The final width of all items after stretching cannot exceed max-width
Calculation formula:
- Suppose a flex-basis containing three items in a parent container is item1, Item2, item3
- Sum = Item1 + Item2 + Item3 for flex-grow of all subitems
There are two cases:
- sum > 1
  - Item1 subitem final width value = Flex-basis type width value + remaining width * (Item1 / sum)
  - The same goes for the other two items
- sum < 1
  - Item1 subitem final width value = flex-basis like width value + remaining width * item1
  - The same goes for the other two items
  - In this case, the subproject cannot allocate all the remaining space, so there will be some remaining space

Sum > 1

Remaining width = 660 – (3 * 100) = 360

sum = 1 + 2 + 3 = 6

Item1 Final width: 100 + 360 * (1/6) = 160

Item2 Final width: 100 + 360 * (2/6) = 220

Item3 Final width: 100 + 360 * (3/6) = 280

<div class="box box1">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
Copy the code

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
}
div {
  box-sizing: border-box;
  border-radius: 15px;
}
.box {
  width: 660px;
  height: 150px;
  background-color: pink;
  box-shadow: 0px 1px 10px 1px # 333;
  margin: 30px;
  display: flex;
}
.item {
  text-align: center;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  flex-basis: 100px;
}
.box1 .item1 {
  background-color: purple;
  flex-grow: 1;
}
.box1 .item2 {
  background-color: maroon;
  flex-grow: 2;
}
.box1 .item3 {
  background-color: orange;
  flex-grow: 3;
  /* max-width: 100px; * /
}
Copy the code

Sum < 1

Remaining width = 660 – (3 * 100) = 360

Sum = 0.1 + 0.2 + 0.3 = 0.6

Item1 Final width: 100 + 360 * 0.1 = 136

Item2 Final width: 100 + 360 * 0.2 = 172

Item3 Final width: 100 + 360 * 0.3 = 208

  <div class="box box2">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
Copy the code

.box2 .item1 {
  background-color: purple;
  flex-grow: 0.1;
}
.box2 .item2 {
  background-color: maroon;
  flex-grow: 0.2;
}
.box2 .item3 {
  background-color: orange;
  flex-grow: 0.3;
}
Copy the code

13. Subproject attributes: Flex-shrink

Flex-shrink: Defines the shrink factor for subprojects
- Defaults to 1(default subitems will not fit and will shrink without newlines)
- The value can be a positive integer, decimal, or 0. It cannot be negative.
- This property value only works if the child item width exceeds the parent container width and is not set to newline
- Note: It is important to make it clear that flex-shrink and flex-basis work together to obtain the final width value
- The final shrink width of all items cannot be less than min-width

Item1 item2 item3 overflowSpace = (item1+ Item2 + Item3) overflowSpace = (item1+ Item2 +item3) -box shrink Shrink1 shrink2 Shrink3 Portion1 = Item1 * Shrink1 Portion2 = Item2 * Shrink2 Portion3 = Item3 * Shrink3 TotalPortion = Portion1 + Portion2 + Portion3 Ratio1 = portion1/totalPortion ratio2 = Portion2 /totalPortion ratio3 = Portion3 /totalPortion  item1-overflowSpace*ratio1 item2-overflowSpace*ratio2 item3-overflowSpace*ratio3Copy the code

Basic CSS styles

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 60px;
}
div {
  box-sizing: border-box;
  border-radius: 15px;
}
.box {
  width: 600px;
  height: 150px;
  background-color: pink;
  box-shadow: 0px 1px 10px 1px # 333;
  margin: 30px;
  display: flex;
}
.item {
  text-align: center;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
}
Copy the code

In the simplest case, flex-basis equals 250 and flex-shrink equals the default value 1

shrink1+shrink2+shrink3 > 1

Assume that a parent container contains three items flex-basis: Item1 250 Item2 250 Item3 250 OverflowSpace = (Item1 + Item2 + Item3) -box width 750-600=150 shrink1 1 shrink2 1 shrink3 Portion1 = Item1 * Shrink1 250 Portion2 = Item2 * Shrink2 250 Portion3 = Item3 * Shrink3 250 TotalPortion = Portion1 + Portion2 + Portion3 250+250+250=750 Ratio1 = portion1/totalPortion 1/3 ratio2 = Portion2 /totalPortion 1/3 ratio3 = Portion3 /totalPortion 1/3  item1-overflowSpace*ratio1 250 - 150*(1/3) = 200 item2-overflowSpace*ratio2 250 - 150*(1/3) = 200 item3-overflowSpace*ratio3 250 - 150*(1/3) = 200Copy the code

<div class="box box1">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
Copy the code

  .item1 {
    background-color: purple;
    flex-basis: 250px;
    flex-shrink: 1;
  }
  .item2 {
    background-color: maroon;
    flex-basis: 250px;
    flex-shrink: 1;
  }
  .item3 {
    background-color: orange;
    flex-basis: 250px;
    flex-shrink: 1;
  }
Copy the code

Slightly more complex cases: Flex-basis is equal to 250 and Flex-shrink is 1, 2, and 3 respectively

shrink1+shrink2+shrink3 > 1

Assume that a parent container contains three items flex-basis: Item1 250 Item2 250 Item3 250 OverflowSpace = (Item1 + Item2 + Item3) -box width 750-600=150 shrink1 1 shrink2 2 shrink3 Portion1 = Item1 * Shrink1 250 Portion2 = Item2 * Shrink2 500 Portion3 = Item3 * Shrink3 750 TotalPortion = Portion1 + Portion2 + Portion3 250+500+750=1500 Ratio1 = portion1/totalPortion 1/6 ratio2 = Portion2 /totalPortion 1/3 ratioo3 = Portion3 /totalPortion 1/2  item1-overflowSpace*ratio1 250-150*(1/6) = 225 item2-overflowSpace*ratio2 250-150*(1/3) = 200 item3-overflowSpace*ratio3 250-150*(1/2) = 175Copy the code

<div class="box box2">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
Copy the code

.box2 .item1 {
  background-color: purple;
  flex-basis: 250px;
  flex-shrink: 1;
}
.box2 .item2 {
  background-color: maroon;
  flex-basis: 250px;
  flex-shrink: 2;
}
.box2 .item3 {
  background-color: orange;
  flex-basis: 250px;
  flex-shrink: 3;
}
Copy the code

More complex cases: Flex-basis is 100, 200, 500, and flex-shrink is 1, 2, 3

shrink1+shrink2+shrink3 > 1

Suppose a parent container contains three items flex-basis: Item1 100 Item2 200 Item3 500 OverflowSpace = (Item1 + Item2 + Item3) -box width 800-600=200 shrink1 1 shrink2 2 shrink3 Portion1 = Item1 * Shrink1 100 Portion2 = Item2 * Shrink2 400 Portion3 = Item3 * Shrink3 1500 Total compression quota: TotalPortion = Portion1 + Portion2 + Portion3 100+400+1500=2000 Ratio1 = portion1/totalPortion 1/20 ratio2 = Portion2 /totalPortion 1/5 ratio3 = Portion3 /totalPortion 3/4  item1-overflowSpace*ratio1 100-200*(1/20) = 90 item2-overflowSpace*ratio2 200-200*(1/5) = 160 item3-overflowSpace*ratio3 500-200*(3/4) = 350Copy the code

<div class="box box3">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
Copy the code

.box3 .item1 {
  background-color: purple;
  flex-shrink: 1;
  flex-basis: 100px;
}
.box3 .item2 {
  background-color: maroon;
  flex-shrink: 2;
  flex-basis: 200px;
}
.box3 .item3 {
  background-color: orange;
  flex-shrink: 3;
  flex-basis: 500px;
}
Copy the code

Shrink1 +shrink2+ Shrink3 < 1 in the most complex case, flex-basis is 100, 200, 500, flex-shrink is 0.1, 0.2, 0.3 shrink1+shrink2+shrink3 < 1

Suppose a parent container contains three items flex-basis: Item1 100 Item2 200 Item3 500 OverflowSpace = (item1+ Item2 +item3) -box width 800-600=200 flex-shrink Shrink1 0.1 shrink2 0.2 shrink3 0.3 totalShrink = shrink1 + shrink2 + Shrink3 0.1 + 0.2 + 0.3 = 0.6 Portion1 = Item1 * Shrink1 10 Portion2 = Item2 * Shrink2 40 Portion3 = Item3 * Shrink3 150 TotalPortion = Portion1 + Portion2 + Portion3 10 + 40 + 150 = 200 Ratio1 = portion1/totalPortion 1/20 ratio2 = Portion2 /totalPortion 1/5 ratio3 = Portion3 /totalPortion 3/4 Item1 -overflowSpace*ratio1*totalShrink 100-200*(1/20)*0.6 = 100-6 = 94 Item2 -overflowSpace*ratio2*totalShrink 100-200*(1/20)*0.6 = 100-6 = 94 item2-overflowSpace*ratio2*totalShrink 200-200*(1/5)*0.6 = 200-24 = 176 Item3-overflowSpace *ratio3*totalShrink 500-200*(3/4)*0.6 = 500-90 = 410Copy the code

Note: Unlike greater than 1, you also need to multiply totalShrink when less than 1.

<div class="box box4">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
Copy the code

.box4 .item1 {
  background-color: purple;
  flex-shrink: 0.1;
  flex-basis: 100px;
}
.box4 .item2 {
  background-color: maroon;
  flex-shrink: 0.2;
  flex-basis: 200px;
}
.box4 .item3 {
  background-color: orange;
  flex-shrink: 0.3;
  flex-basis: 500px;
}
Copy the code

14. Subproject attributes: Flex

Flex: flex-grow flex-shrink flex-basis Is a shorthand attribute for three properties
- There are three cases, one value, two values, three values.
- Less easy to remember, the following is a simpler way to sort out the rules

One value number 0 or 1 px Initial, auto, and None first: number 0 or 1 second: number px first: number 0 or 1 second: number Number 0 or 1 third: pxCopy the code

 <div class="box box1">
   <div class="item item1">1</div>
   <div class="item item2">2</div>
   <div class="item item3">3</div>
   <div class="item item4">4</div>
 </div>
Copy the code

.item1 {
  flex: initial; /* Initial value: 0 1 auto */
}
.item2 {
  flex: auto; /* 1 1 auto */
}
.item3 {
  flex: none; /* 0 0 auto */
}
.item4 {
  flex: 1; /* Common use mode. The default value is 1 1 0 */
}
Copy the code