flex布局（2）：flex-basis
flex是flex-grow，flex-shrink和flex-basis三个属性的缩写。第⼆个和第三个参数(flex-shrink和flex-basis)是可选值。其默认值是0 1 auto。
flex-grow属性定义项⽬的放⼤⽐例，默认为0，即如果存在剩余空间，也不放⼤。
flex-shrink属性定义了项⽬的缩⼩⽐例，默认为1，即如果空间不⾜，该项⽬将缩⼩。
如果所有项⽬的flex-shrink属性都为1，当空间不⾜时，都将等⽐例缩⼩。如果⼀个项⽬的flex-shrink属性为0，其他项⽬都为1，则空间不⾜时，前者不缩⼩。
flex布局详细讲解负值对该属性⽆效。
flex-basis属性定义了在分配多余空间之前，项⽬占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项⽬的本来⼤⼩。
怎么理解这句话呢。
来做个实验吧。
1. flex 三个属性都设为默认值。 flex: 0 1 auto;
这种情况下，项⽬不会因为有剩余空间⽽放⼤，但是空间不够时，如果容器没设置宽度，⽽flex-shrink默认为1，那么项⽬就会缩⼩，⽂字换⾏。
2. flex: 1 1 auto;
看参考线位置，可以看出每个项⽬扣除内容后的剩余空间，是⼀致的，不管项⽬⼤⼩。空间放⼤，项⽬跟着放⼤，给每个项⽬扣除内容后的剩余空间，按照第⼀个值（flex-grow）分配相同的尺⼨。
3. flex: 1 1 auto; 第三个项⽬的 flex-grow: 2。
<style>
*{ /*实际开发中，别这样偷懒哦*/
margin: 0;
padding: 0;
list-style: none;
}
div{
/*width: 600px;*/
margin: 0 auto;
}
ul{
display: flex;
}
li{
display: flex;
align-items: center;
justify-content: center;
height: 40px;
border: 1px solid red;
flex:1 1 auto; /*3个值分别是flex-grow, flex-shrink, flex-basis*/
}
.div3{
flex-grow: 2;
}
</style>
</head>
<body>
<div>
<ul>
<li>⽂</li>
<li>⼀段⽂本</li>
<li class="div3">另外⼀段⽂本长长长长长长长长</li>
</ul>
</div>
</body>
先看效果图：
可以看出，第三个项⽬的剩余空间，是前⾯两个项⽬的2倍。简写 flex 3个值均为默认。
3. 如果省略了默认的值呢。
style部分改成这样：
li{
display: flex;
align-items: center;
justify-content: center;
height: 40px;
border: 1px solid red;
flex:1;
}
.div1{
flex: 2;
}
前两个项⽬flex 值为 1 的宽度：
flex值为 2 的宽度：
可以看出，flex为2的项⽬，⽆论内容占据多少空间，项⽬的宽度是flex为1的项⽬的两倍。在省略默认值不写的情况下，flex-basis 的值等同为 0 。
When omitted from the shorthand, its specified value is 0.
4. 如果第三个 flex-basis的值为0的情况。表现形式和不写默认值的情况⼀致，flex 为2的项⽬的总宽度是其他flex为1的项⽬宽度的2倍。
来看下w3.org上的⽂档。
Name:flex-basis
Value:content
Initial:auto
Applies to:
Inherited:no
Percentages:relative to the inner
Media:visual
Computed value:as specified, with lengths made absolute
Animation type:discrete for keywords, otherwise as length, percentage, or calc
Authors are encouraged to control flexibility using the shorthand rather than with directly, as the
shorthand correctly resets any unspecified components to accommodate .
建议⽤ flex 简写，因为简写准确重置未指定属性。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论