Understanding flex-grow, flex-shrink, flex-basis and nine-grid layout

1. flex-grow, flex-shrink, flex-basis properties

flex-grow: defines how the remaining space is divided. The default value is 0, which means that if there is remaining space, it will not be enlarged.

flex-shrink: defines the shrink ratio of the item. The default value of flex-shrink is 1, and when the value of flex-shrink is 0, there is no scaling.

flex-basis: defines how much spindle space an item takes up. The browser calculates the amount of excess or insufficient space on the main axis based on this property. Its default value is auto, which is the original size of the project.
The priority of flex-basis is higher than that of the width property. If only the width property is set and flex-basis is auto, the original length of the item is equal to the width. If both width and flex-basis are set, the original length of the item is equal to flex-basis.

Example:
HTML code:

<div class="flex-attr">
    <div class="item-1 pink">
      <span>1 2 3 4 5 6 7 8 9</span>
    </div>
    <div class="item-2 skyblue">
      <span>1 2 3 4 5 6 7 8 9</span>
    </div>
    <div class="item-3 gray">
      <span>1 2 3 4 5 6 7 8 9</span>
    </div>
</div>

CSS code:

.flex-attr {
  margin-bottom: 600px;
  width: 580px;
  display: flex;
}
.item-1 {
  width: 100px;
  flex-grow: 1;
  flex-shrink: 1;
}
.item-2 {
  width: 100px;
  flex-grow: 2;
  flex-shrink: 2;
}
.item-3 {
  width: 200px;
}
.pink {
  background-color: pink;
}
.skyblue {
  background-color: skyblue;
}
.gray {
  background-color: gray;
}

When the width of the parent element div.flex-attr is greater than the width of the three child elements, the width of the three child elements will be enlarged. Because the flex-grow of the third child element is 0 by default and does not enlarge, only the width of the first two child elements is enlarged, and the enlargement ratio is 1:2.

In this example, the width of the parent element is set to 580px. By calculation, the width of the parent element is 180px more than the width of the three child elements. According to the enlargement ratio, the width of div.item-1 is enlarged by 180 (1/3) = 60px, and the width of div.item-2 is enlarged by 180 (2/3) = 120px. Therefore, the final widths of the three child elements are 160px, 220px, and 200px, as shown in the following figure:

When the width of the parent element div.flex-attr is less than the width of the three child elements, the width of the three child elements will shrink. The reduction ratio is: child element width ratio * flex-shrink attribute ratio. For example: if the width ratio of the three sub-elements is 1:1:2, and the ratio of the flex-shrink attribute is 1:2:1 (the default flex-shrink of the third sub-element is 1), then the reduction ratio is 1:2:2.

In this example, the width of the parent element is set to 320px. By calculation, the width of the three child elements is 80px wider than the parent element. According to the reduction ratio, the width of div.item-1 is reduced by 80 (1/5) = 16px, and the widths of div.item-2 and div.item-3 are both reduced by 80 (2/5) = 32px. Therefore, the final widths of the three child elements are 84px, 68px, and 168px, as shown in the following figure:

2. Nine-grid layout

1) Using flex

HTML code:

<div class="squ-4">
  <div class="squ-inner flex">
     <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 class="item">9</div>
  </div>
</div>

CSS code:

.squ-4 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* The padding percentage is calculated relative to the width of the parent element*/
  margin-bottom: 30px;
}
.squ-4 .squ-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Fill the parent element container, then the width and height are always equal*/
}
.squ-4 .squ-inner>div {
  width: calc(98% / 3); 
  height: calc(98% / 3);
  margin-right: 1%;
  margin-bottom: 1%;
  overflow: hidden;
}
.squ-4 .flex {
  display: flex;
  flex-wrap: wrap;
}
.flex>div {
  flex-grow: 1;
  background-color: skyblue;
  text-align: center;
  color: #fff;
  font-size: 50px;
  line-height: 2;
}
.flex>div:nth-of-type(3n) {
  margin-right: 0;
}
.flex>div:nth-of-type(n+7) {
  margin-bottom: 0;
}

It should be noted here that in order to make the width and height of each grid equal, two layers of parent elements are wrapped around div.item. The outermost div.squ-4 uses height: 0 and padding-bottom: 100%. Because the padding percentage is calculated relative to the width of the parent element, setting the width: 100% and height: 100% of the div.squ-inner element will make the width and height of the element always equal.

2) Using Grid

HTML code:

<div class="squ-5">
  <div class="squ-inner">
    <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 class="item">9</div>
  </div>
</div>

CSS code:

.squ-5 {
  position: relative;
  top: 0;
  left: 0;
  height: 0;
  padding-bottom: 100%;
}
.squ-5 .squ-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: row;
}
.squ-5 .item {
  background-color: pink;
  border: 1px solid #fff;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.