flex: [ <'flex-grow'> <'flex-shrink'> ? || <'flex-basis'> ]
flex 属性值可以包含三个参数:flex-grow,flex-shrink 和 flex-basis。
第二个和第三个参数(flex-shrink 和 flex-basis)可选。
当flex属性值取两个参数的时候。默认指定的是第一个参数和第三个参数值。如下述:
.flex-item {
/* 此属性值设置 */
flex: 1 100px;
/* 等同于 */
flex-grow: 1;
flex-basis: 100px;
}
参考: https://css-tricks.com/almanac/properties/f/flex/
通过这个例子验证下边的属性:
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
.box{
width: 250px;
height: 35px;
border: 1px solid #555;
font: 14px Arial;
display: flex;
flex-direction: row;
}
.box > div {
flex:auto; /* 接下来修改这个属性值测试 */
}
.box > div:nth-child(1) {
background-color: #D3D3D3;
}
.box > div:nth-child(2) {
background-color: #EEB4B4;
}
.box > div:nth-child(3) {
background-color: #ADD8E6;
}
依次修改下述属性值:
1. flex: none
等同于 flex: 0 0 auto
这时候容器完全不再灵活。即不能放大也不能缩小。
该属性和 flex:initial (下方)很类似,除了它不允许 flex-shrink 属性(不能缩小),即使元素可能会溢出。
如果让容器 box 里的flex元素呢内容超过 box 容器预设宽度。元素会溢出。
2. flex: 0 auto
等同于 flex: initial. 默认值为flex: 0 1 auto。
此时,当容器剩余一些空闲空间时,该属性使灵活的项目变得不灵活,因为其不能自由拉伸放大。
但是当容器没有足够的空间时,该属性允许其缩小到项目的最小值。
因为空间不足第三个 div 缩放到除去其他元素所占空间的最小值,主轴上不会溢出。
3. flex: auto
等同于 flex: 1 1 auto
这个时候,该属性使项目完全灵活,它们能够吸收主轴上额外的空间。既可以自由放大也可以自由缩小。
4. flex:<positive-number> <意为 正数>
等同于 flex: <positive-number> 1 0px
当 flex 取值为一个非负数字,则该数字为 flex-grow 的值,flex-shrink 取 1,flex-basis 取 0%。
这个时候,该属性使弹性项目变得灵活,flex元素在主轴方向上的初始大小flex-basis为零。
项目将根据容器的大小按照自身的比例自由伸缩。
5. flex:<positive-number> xxpx ||%xx
等同于 flex: <positive-number> 1 xxpx||%xx
该属性和上边的CSS案例一致,即 当 flex 取值为一个非负数字和一个长度(px)或百分比(%),
则分别视为 flex-grow 和 flex-basis 的值,flex-shrink 默认取 1