弹性布局flex:1详解

在最初学习flex布局的时候,局限于使用flex的属性来布局,但是实际的详细刨铣却很少,最近在一些大厂的面试中被闻到一些细节,感觉自己学的有些粗糙,这里好好整理下

首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写

flex-grow 属性定义弹性盒子项（flex item）的拉伸因子

举个例子:

HTML代码

<body>

</div>

</body>

CSS代码

<style>

#content {

-ms-box-orient: horizontal;

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -moz-flex;

display: -webkit-flex;

display: flex;

-webkit-justify-content: space-around;

justify-content: space-around;

-webkit-flex-flow: row wrap;

flex-flow: row wrap;

-webkit-align-items: stretch;

align-items: stretch;

}

.box {

flex-grow: 1;

border: 3px solid rgba(0,0,0,.2);

}

.box1 {

flex-grow: 2;

border: 3px solid rgba(0,0,0,.2);

}

</style>

效果如图:

flex-shrink:设置或检索弹性盒的收缩比率

语法：

flex-shrink：<number>

默认值：1

适用于：flex子项

继承性：无

动画性：是

计算值：指定值

取值：

<number>：: 用数值来定义收缩比率。不允许负值

说明：

设置或检索弹性盒的收缩比率。

根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
示例：a,b,c将按照1:1:3的比率来收缩空间
HTML Code：
```
&lt;ul class=&quot;flex&quot;&gt;    &lt;li&gt;a&lt;/li&gt;    &lt;li&gt;b&lt;/li&gt;    &lt;li&gt;c&lt;/li&gt;&lt;/ul&gt;.flex{display:flex;width:400px;margin:0;padding:0;list-style:none;}.flex li{width:200px;}.flex li:nth-child(3){flex-shrink:3;}
```
flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3

我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化

通过收缩因子，所以加权综合可得200*1+200*1+200*3=1000px；
于是我们可以计算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(200*1/1000)*200，即约等于40px
b被移除溢出量：(200*1/1000)*200，即约等于40px
c被移除溢出量：(200*3/1000)*200，即约等于120px
最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px

flex-basis: flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。

取值

<'width'>

width 值可以是一个数字后面跟着绝对单位例如 px, mm, pt; 该值也可以是一个百分数，那么这个百分数就是相对于其父弹性盒容器的宽或者高（取决于主轴方向）。负值是不被允许的。

content

基于 flex 的元素的内容自动调整大小。

语法

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;/* Automatically size based on the flex item’s content */
flex-basis: content;/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

Example

HTML

<ul class="container"><li class="flex flex1">1: flex-basis test</li><li class="flex flex2">2: flex-basis test</li><li class="flex flex3">3: flex-basis test</li><li class="flex flex4">4: flex-basis test</li><li class="flex flex5">5: flex-basis test</li>
</ul><ul class="container"><li class="flex flex6">6: flex-basis test</li>
</ul>

CSS

.container {font-family: arial, sans-serif;margin: 0;padding: 0;list-style-type: none;display: flex;flex-wrap: wrap;
}.flex {background: #6AB6D8;padding: 10px;margin-bottom: 50px;border: 3px solid #2E86BB;color: white;font-size: 20px;text-align: center;position: relative;
}.flex:after {position: absolute;z-index: 1;left: 0;top: 100%;margin-top: 10px;width: 100%;color: #333;font-size: 18px;
}.flex1 {flex-basis: auto;
}.flex1:after {content: 'auto';
}.flex2 {flex-basis: -webkit-max-content;flex-basis: -moz-max-content;flex-basis: max-content;
}.flex2:after {content: 'max-content';
}.flex3 {flex-basis: -webkit-min-content;flex-basis: -moz-min-content;flex-basis: min-content;
}.flex3:after {content: 'min-content';
}.flex4 {flex-basis: -webkit-fit-content;flex-basis: -moz-fit-content;flex-basis: fit-content;
}.flex4:after {content: 'fit-content';
}.flex5 {flex-basis: content;
}.flex5:after {content: 'content';
}.flex6 {flex-basis: -webkit-fill-available;flex-basis: -moz-available;flex-basis: fill;
}.flex6:after {content: 'fill/-webkit-fill-available/-moz-available';
}

Results