第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思 #380

yygmind · 2020-05-12T00:49:20Z

No description provided.

buerwei · 2020-05-12T01:07:37Z

三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为0 1 auto。
1.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
2.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
3.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

lixuguang · 2020-05-12T01:13:19Z

.item {
flex-grow: 0; // 增长比例，子项合计宽度小于容器宽度，需要根据每个子项设置的此属性比例对剩下的长度进行分配
flex-shrink: 1; // 回缩比例，子项合计宽度大于容器宽度，需要根据每个子项设置的此属性比例对多出的长度进行分配
flex-basis: auto; // 设置了宽度跟宽度走，没设置宽度跟内容实际宽度走
}

zrx1118 · 2020-05-12T01:22:19Z

flex :flex-grow flex-shrink flex-basis

①.flex-grow 剩余空间索取

默认值为0，不索取

eg:父元素400，子元素A为100px，B为200px.则剩余空间为100

此时A的flex-grow 为1，B为2，

则A=100px+1001/3; B=200px+1002/3

②.flex-shrink 子元素总宽度大于复制元素如何缩小

父400px,A 200px B 300px

AB总宽度超出父元素100px;

如果A不减少，则flex-shrink ：0,B减少；

②,flex-basis

该属性用来设置元素的宽度，当然width也可以用来设置元素的宽度，如果设置了width和flex-basis，那么flex-basis会覆盖width值。

wuxiii · 2020-05-12T01:24:09Z

flex :flex-group flex-shirk flex-basis

①.flex-group 剩余空间索取

默认值为0，不索取

eg:父元素400，子元素A为100px，B为200px.则剩余空间为100

此时A的flex-group为1，B为2，

则A=100px+100_1/3; B=200px+100_2/3

②.flex-shrik 子元素总宽度大于复制元素如何缩小

父400px,A 200px B 300px

AB总宽度超出父元素100px;

如果A不减少，则flex-shink ：0,B减少；

②,flex-basis

该属性用来设置元素的宽度，当然width也可以用来设置元素的宽度，如果设置了width和flex-basis，那么flex-basis会覆盖width值。

flex-grow拼写错了

xwjla · 2020-05-13T01:44:58Z

flex :flex-group flex-shirk flex-basis
①.flex-group 剩余空间索取
默认值为0，不索取
eg:父元素400，子元素A

flex :flex-group flex-shirk flex-basis
①.flex-group 剩余空间索取
默认值为0，不索取
eg:父元素400，子元素A为100px，B为200px.则剩余空间为100
此时A的flex-group为1，B为2，
则A=100px+100_1/3; B=200px+100_2/3
②.flex-shrik 子元素总宽度大于复制元素如何缩小
父400px,A 200px B 300px
AB总宽度超出父元素100px;
如果A不减少，则flex-shink ：0,B减少；
②,flex-basis
该属性用来设置元素的宽度，当然width也可以用来设置元素的宽度，如果设置了width和flex-basis，那么flex-basis会覆盖width值。

flex-grow拼写错了

一看我就是不认真

复制粘贴当自己拼写的吗？

qianlongo · 2020-05-24T14:08:51Z

flex: 0 1 auto的含义大家都说的很清楚，查了一些资料补充一下以下两种情况的子元素在分配主轴空间上的计算方式

主轴空间宽度有剩余，子元素最终的宽度？

<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>

<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        width: 140px;
        flex: 2 1 0%;
        background: blue;
    }
    .item-2 {
        width: 100px;
        flex: 2 1 auto;
        background: darkblue;
    }
    .item-3 {
        flex: 1 1 200px;
        background: lightblue;
    }
</style>

主轴空间宽度不足，子元素最终的宽度？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .container {
      width: 600px;
      height: 300px;
      display: flex;
    }
    .left {
      /* 285 */
      flex: 1 2 500px;  
      background: red;
    }
    .right {
      /* 314 */
      flex: 2 1 400px;
      background: blue;
    }
  </style>
</body>
  1. 总权重  500 * 2 + 400 * 1 = 1400 <br />
  2. 需要缩小的宽度 <br />
    left (500 * 2 / 1400) * 300 = 214.285714286<br />
    right (400 * 1 / 1400) * 300 = 85.714285714<br />
  3. 最后的宽度<br />
    left 500 - 214.285714286 = 285.714285714<br />
    right 400 - 85.714285714 = 314.285714286  <br />
</html>

zengpeng123 · 2020-07-01T10:38:46Z

flex-group: 指定容器剩余空间多余时的分配规则，默认是0（多余的空间不分配）
flex-shrink：指定容器剩余空间不足时的分配规则，默认是1（空间不足时要分配）
flex-basis：指定固定的分配数量，默认是auto

lidong081824 · 2020-09-02T06:33:16Z

flex 常用属性介绍
1.flex-grow: 扩张比率，只有当子集宽度合计小于父级宽度(需要子集扩张)时才看这个值；
2.flex-shrink:收缩比率，只有当子集宽度合计大于父级宽度(需要子集收缩)时才看这个值；
3.flex-base:项目长度，可以自动计算，继承，和设置具体的长度值；

举例：求left right的宽度
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 300px;
background: #EAEAEA;
}
.right {
flex: 2 1 400px;
background: white;
}
分析：
1.先确定看flex-grow还是flex-shrink:父级宽度(600)<子集宽度之和(300+400=700)因此子集需要收缩，收缩比2:1
2.收缩总量:700-600=100；权重计算：2300+1400=1000，left最终宽：300-1002300/1000=240；right最终宽度：400-1002300/1000=360;
扩张比会简单一点：总宽-子集宽之和直接按扩张比进行计算；

ietwangwei · 2021-07-16T08:34:35Z

flex-grow: 0;
flex-shrink: 1;
flex-basic: auto;

Yangfan2016 · 2022-08-15T10:37:42Z

@qianlongo

关于主轴宽度不够 300px 是如何计算的，求解

yygmind added 拼多多字节 CSS世界 labels May 12, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思 #380

第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思 #380

yygmind commented May 12, 2020

buerwei commented May 12, 2020

lixuguang commented May 12, 2020

zrx1118 commented May 12, 2020 •

edited

Loading

wuxiii commented May 12, 2020

xwjla commented May 13, 2020

qianlongo commented May 24, 2020

zengpeng123 commented Jul 1, 2020

lidong081824 commented Sep 2, 2020

ietwangwei commented Jul 16, 2021

Yangfan2016 commented Aug 15, 2022

第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思 #380

第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思 #380

Comments

yygmind commented May 12, 2020

buerwei commented May 12, 2020

lixuguang commented May 12, 2020

zrx1118 commented May 12, 2020 • edited Loading

wuxiii commented May 12, 2020

xwjla commented May 13, 2020

qianlongo commented May 24, 2020

主轴空间宽度有剩余，子元素最终的宽度？

主轴空间宽度不足，子元素最终的宽度？

zengpeng123 commented Jul 1, 2020

lidong081824 commented Sep 2, 2020

ietwangwei commented Jul 16, 2021

Yangfan2016 commented Aug 15, 2022

zrx1118 commented May 12, 2020 •

edited

Loading