An article explaining in detail the impact of three flex properties on elements

The flex attribute is often used during development to act on the child elements of the flexible box, for example: flex:1 or flex: 1 1 auto, so what exactly does this attribute control the behavior of the element? flex:1What exactly does it mean? Let this article take you through a thorough understanding of the flex property! [Recommended learning: css video tutorial]

First we need to understand that flex has three attributesflex-grow,flex-shrink, The abbreviation of flex-basis, you can use one, two, or three values ​​to specify the flex attribute. For specific syntax, please refer to MDN-flex

Next we will dismantle the impact of these three attributes on the element one by one

flex-basis

flex-basis defines the size of the initialized flex child element before space allocation occurs. The attribute default value is auto; before the flex child element is stretched or shrunk, its size is How many.

If flex-basis is set to auto, the browser will first check whether the main size of the flex child element is set to the initial value of the flex child element.

For example, if you have set a width of 150px for your flex child element, then 150px is the flex-basis of this flex child element; if it is not set, auto will resolve to the size of its content. In this example, the width of the first element is set to 150px, and the width of the second and third elements is not set.

:first-child {
  width: 150px;
}

The effect is as follows:

If you want flexbox to completely ignore the size of flex child elements, set flex-basis to 0. In this way, even if element 1 has a width set, its final width will be the content width.

Positive and negative free space

Let’s look at two concepts before introducing the remaining two attributespositive free space Positive free space and negative free spaceReverse free space:

• Forward free space

  For example, now there is 500px For a wide flex container, the flex-direction attribute value is row, and there are three 100px wide flex child elements, then the 200px that is not filled is the positive free space.

• Reverse free space

  When the sum of the widths of the child elements is greater than the width of the container, overflow The size 100px is the reverse free space.

So what attributes are used to allocate positive and negative free space?

flex-grow

• flex-grow Default value 0, if assigned to a positive integer , the flex element will grow in size along the main axis based on flex-basis and occupy the available space. flex-grow allocates growth space proportionally.

Initial state: We set the width for all three elements, and the sum is not greater than the main axis width

.flex-grow-father {
  width: 500px;
  div:nth-child(1) {
    width: 50px;
  }
  div:nth-child(2) {
    width: 100px;
  }
  div:nth-child(3) {
    width: 150px;
  }
}

增加的宽度计算方法：假设元素的 flex-grow 值为 x，正向自由空间宽度为l，则每个元素增加的宽度=$\frac{x}{x的总和}*l$，元素最终宽度 = $元素初始宽度 + 增加的宽度$；

• 相同比例增长：当给每个子元素的都设定相同的 flex-grow 值，每个元素就会增长相同的宽度

.with-same-flex-grow {
  * {
    flex-grow: 1;
  }
}

效果如下：

Calculation of the width of the first element in this example$\frac{1}{111}\#\#\ast 200\mathrm{}50\mathrm{}=116.67\mathrm{}px\#\#\backslash frac\{1\}\{1\; 1\; 1\}*200\; 50\; =\; 116.67px$

第二个元素宽度宽度计算 $\frac{1}{1+1+1}*200 + 100 = 166.67px$；

第三个同理为$216.67px$

• 不同比例增长：给每个子元素的都设定不同的 flex-grow 值

.with-different-flex-grow {
  div:nth-child(1) {
    flex-grow: 2;
  }
  div:nth-child(2) {
    flex-grow: 1;
  }
  div:nth-child(3) {
    flex-grow: 1;
  }
}

效果如下：

Calculation of the width of the first element in this example$\frac{2}{211}\#\#\ast 200\mathrm{}50\mathrm{}=150\mathrm{}px$

第二个元素宽度的计算$\frac{1}{2+1+1}*200 + 100 = 150px$；

第三个同理是$200px$

• 如果想让开始时尺寸不同的元素内容宽度相等（平分容器宽度），可以将 flex-basis 设置为 0（完全忽略 flex 子元素的尺寸） flex-grow 为 1（等比例分配）

.average {
  * {
    /* flex: 1 1 0; */
    flex-basis: 0;
    flex-grow: 1;
  }
}

效果如下：

flex-shrink

flex-shrink 属性指定了 flex 元素的缩小值,默认值为 1； 它确定在分配 negative free space 时，flex 子元素相对于 flex 容器中其余 flex 子元素收缩的程度。默认值 1。用于减少盒子空间使盒子适应容器而不溢出(为了避免 border 干扰去掉边框)

我们给三个元素都设定宽度，并且总和大于主轴宽度；这里我们将元素的flex-shrink值设置为 0 (元素宽度不变，不需要吸收溢出的宽度)，目的是观察一下反向自由空间。

.flex-shrink-wrapper {
  display: flex;
  div:nth-child(1) {
    width: 100px;
    background: gold;
  }
  div:nth-child(2) {
    width: 200px;
    background: tan;
  }
  div:nth-child(3) {
    width: 300px;
    background: gold;
  }
}
.zero {
  * {
    flex-shrink: 0;
  }
}

Absorbed width calculation: Assume that the value of each flex-shrink is ${}_{}$ ${}_{}$L$$L$\frac{{\ast }_{}n{}_{}}{{\ast }_{\mathrm{}}1{}_{\mathrm{.}}..\mathrm{}\mathrm{}\mathrm{x}n{\ast }_{}n{}_{\ast }L}\backslash frac\{x\_n*l\_n\}\{x\_1*l\_1\; ...\; x\_n*l\_n\}*L$

• 给子元素相同的 flex-shrink 值，这里以默认值 1 为例

.with-same-flex-shrink {
  * {
    flex-shrink: 1;
  }
}

The absorption width of the first element at this time is: $\frac{1*100} {1*100 1*200 1*300}*100 = 16.67px$##100$16.67=83.37p\mathrm{x}100-16.67=83.37px$##1

The absorption width of the first element at this time is: $\frac{1*200} {1*100 1*200 1*300}*100 = 33.33px$##200$33.33=166.67p\mathrm{x}\mathrm{\#\#200-33.33=166.67px}$##2

这时第一个元素的吸收宽度为：$\frac{1*300}{1*100+1*200+1*300}*100 = 50px$，最终元素宽度为 $300-50=250px$

• 给子元素不同的 flex-shrink 值

.with-different-flex-shrink {
  div:nth-child(1) {
    flex-shrink: 1;
  }
  div:nth-child(2) {
    flex-shrink: 2;
  }
  div:nth-child(3) {
    flex-shrink: 0;
  }
}

At this time, the absorption width of the first element is: $\frac{\#\#1\mathrm{}\ast 100\mathrm{}}{1\mathrm{}\ast 100\mathrm{}2\mathrm{}\ast 200\mathrm{}}\ast 100\mathrm{}=20\mathrm{}px$ ##100$-20\mathrm{}=80\mathrm{}px\mathrm{}\mathrm{100-20=80px}$##1

At this time, the absorption width of the second element is: $\frac{2*200}{1*100 2*200}*100 = 80px$##200$80=120p\mathrm{x}200-80=120px$

##300p$x\mathrm{300px}3$0

flex 的简写值

一般我们很少见上述属性单独使用，都是用flex这一个简写属性来表述元素的伸缩。

Flex 简写形式允许你把三个数值按这个顺序书写 flex-grow，flex-shrink，flex-basis。以下是常见的几种取值：

• flex: initial 的扩展为 0 1 auto (不可放大、可缩小、大小与容器元素大小一致)
• flex: auto 的扩展为 1 1 auto (可放大、可缩小、大小与容器元素大小一致)
• flex: none 的扩展为 0 0 auto (不可放大、不可缩小、大小与容器元素大小一致)
• flex: <positive-number></positive-number>的扩展为 <positive-number> 1 0</positive-number>

flex: <positive-number></positive-number>的应用：

两栏布局

.two-grid-wrapper {
  display: flex;
  margin-top: 20px;
  height: 200px;
  .left {
    width: 200px;
    background-color: gold;
  }
  .right {
    flex: 1;
    background-color: tan;
  }
}

效果如下：左侧宽度不变，右侧自适应

三栏布局

.three-grid-wrapper {
  display: flex;
  margin-top: 20px;
  height: 200px;
  .left {
    width: 200px;
    background-color: gold;
  }
  .right {
    width: 200px;
    background-color: gold;
  }
  .center {
    flex: 1;
    background-color: tan;
  }
}

效果如下：左右宽度不变，中间自适应

PS.flex 子元素没有 positive free space 就不会增长；没有 negative free space 就不会缩小。

结束语

学习八股文的时候发现自己对flex布局很不熟悉，基本概念都说不上来，只会无脑用，于是去学习，然后就诞生了这篇文章。欢迎指正。

（学习视频分享：web前端）

The above is the detailed content of An article explaining in detail the impact of three flex properties on elements. For more information, please follow other related articles on the PHP Chinese website!