【移动端网页布局】flex 弹性布局子项目属性 ① ( flex 属性用法说明 | 代码示例 : 占有剩余布局 / 平均分成若干等份 )
在flex布局中，flex属性是一个简写属性，用于设置flex-grow, flex-shrink 和 flex-basis这三个属性。它的语法如下：
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}其中，flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不会放大；flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。它可以设为auto，表示项目的本来大小。
下面是一个使用flex属性的示例：
.container {
display: flex;
}
.item {
flex: 1; /* 等同于 flex: 1 1 0%; */
}HTML代码：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>在这个例子中，.item类使用了flex: 1;，意味着所有的子项目都会平等地分配父容器的剩余空间，并且它们会在空间不足时缩小。
评论已关闭