Flex grow, flex shrink, flex basis and nine palace layout understanding

Time:2019-12-8

I. properties of flex grow, flex shrink, and flex basis

Flex grow: defines the division of the remaining space. The default is 0, that is, if there is space left, it is not enlarged.

Flex shrink: defines the reduction of the project. The default value of flex shrink is 1. When the value of flex shrink is 0, it does not scale.

Flex basis: defines the spindle space occupied by the project. According to this property, the browser calculates the size of the redundant or insufficient space of the spindle. Its default value is auto, which is the original size of the project.
The priority of flex basis is higher than the width attribute. If only the width attribute is set and flex basis is auto, the original length of the project is equal to width. If both width and flex basis are set, the original length of the project 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 is enlarged. Because the flex growth of the third child element is 0 by default and does not zoom in, only the width of the first two child elements is zoomed in at a scale of 1:2.

In this case, the width of the parent element is set to 580px. By calculation, the width of the parent element is 180px more than that of the three child elements. According to the magnification, the width of div.item-1 is enlarged by 180(1 / 3) = 60px, width of div.item-2 is enlarged by 180(2 / 3) = 120px, so the final width of the three sub elements is 160px, 220px, 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 be reduced. The reduced scale is: the width scale of the child element * the flex shrink attribute scale. For example, if the width scale of the three child elements is 1:1:2, and the scale of the flex shrink attribute is 1:2:1 (the flex shrink of the third child element is 1 by default), the reduction scale is 1:2:2.

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

II. Layout of nine palaces

1) implemented with 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%; / * 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%; / * when the parent element container is full, the width and height will always be the same*/
}
.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 that in order to make the width and height of each grid equal, div.item is wrapped with two layers of parent elements. The outer layer of div.squa-4 uses height: 0 and padding bottom: 100%, because the padding percentage is calculated relative to the width of the parent element. At this time, setting the width: 100% and height: 100% of the div.squa-inner element can make the width and height of the element always equal.

2) grid implementation

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 whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.