阅读 31

详谈flex属性

在学习圣杯布局的时候,对于flex : 1这个属性有点不解,所以在这里记录我对这个属性的学习。

flex 属性

flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 下面我归纳了这三个属性的使用规则。

1.flex-grow

flex-grow 定义项目的放大比例,不支持负值,默认为0。

flex-grow分配剩余空间的规则如下:

(1).如果这个容器内的子容器只有一个

则子容器这样分配剩余空间: 当0 < flex-grow的取值 <= 1 ,则会将剩余空间按照这个比例分配剩余空间:

flex-grow: 0.5;
//这里我没有设置初始长度,所以剩余空间是整个父容器的宽度
复制代码

那么结果就是分配一半剩余空间:

如果flex-grow的取值 > 1,则分配所有剩余空间:

flex-grow: 1.2;
//这里我没有设置初始长度,所以剩余空间是整个父容器的宽度
复制代码

那么结果就是分配所有剩余空间:

(2)如果这个容器内的子容器不止一个

则子容器这样分配剩余空间:当0 < flex-grow的取值总和 <= 1,则按比例分配剩余空间:

//父容器width:300px
//红色子容器flex-grow:0.1; 结果为30px
//绿色子容器flex-grow:0.3; 结果为90px
复制代码

flex-grow的取值总和 > 1,则依照flex-grow的比例分配剩余所有空间:

//父容器width:300px
//红色子容器flex-grow:0.8;
//绿色子容器flex-grow:0.4; 
//0.8+0.4 = 1.2 > 1 则红:绿 = 2 : 1分配所以剩余空间
//红为200px,绿为100px
复制代码

2.flex-shrink

flex-shrink定义项目的缩小比例,默认为1,负值对该属性无效。 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。

如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

flex-shrink的收缩规则和flex-grow相似。

3.flex-basis

flex-basis指定了Flex元素在主轴方向的初始大小

如果不使用 box-sizing 改变盒模型的话,flex-basis决定了Flex元素的内容盒子(content-box)的大小

所以总结来说:

(1).当flex布局横向的时候,即flex-direction取值为row时,flex-basis相当于width。

(2).当flex布局纵向的时候,即flex-direction取值为column时,flex-basis相当于height。

flex-basis的取值

(1).数值:不允许负数。

(2).百分数:相对于其父弹性盒容器主轴尺寸的百分数。

(3).auto:默认值,盒子的大小等于设置的长度,如果没有设置长度,则会以盒子内容来计算。



flex的常见取值:

1.flex : none

相同于flex : 0 0 auto

flex-grow:0表示不用剩余空间来扩展自己的宽度
flex-shrink:0表示不会缩放
flex-basis:auto:默认值,盒子的大小等于设置的长度,如果没有设置长度,则会以盒子内容来计算
复制代码

所以flex : none根据盒子设置的大小决定盒子的大小(如果盒子没有设置长度,则根据盒子内容计算),且这个盒子不可伸缩。

2.flex : auto

相同于flex : 1 1 auto

flex-grow:1表示会分配剩余空间来扩展自己的宽度
flex-shrink:1表示当空间不足时,都将等比例缩小
flex-basis:auto:默认值,盒子的大小等于设置的长度,如果没有设置长度,则会以盒子内容来计算
复制代码

所以flex : auto根据盒子设置的大小决定盒子的大小(如果盒子没有设置长度,则根据盒子内容计算),且这个盒子可以伸缩。

3.flex : 1

相同于flex :1 1 0%

flex-grow:1表示会分配剩余空间来扩展自己的宽度
flex-shrink:1表示当空间不足时,都将等比例缩小
flex-basis:0%:盒子的大小设置为0
复制代码

所以flex : 1,这个盒子可以伸缩, 会占用伸缩容器的剩余空间。

盒子可以弹性伸缩,所以这里举两个例子:

例1:圣杯布局
<div id="header">HEADER</div>
<div id="container">
    <div id="left"  class="column">LEFT</div>
    <div id="center" class="column">CENTER</div>
    <div id="right" class="column">RIGHT</div>
    </div>
<div id="footer">FOOTER</div>

/*--------center部分--------*/
#center{
    flex: 1;
    background: rgb(175, 209, 167);
}
复制代码

例2:竖向中间内容自适应
<div id="header">HEADER</div>
<div id="center">CENTER</div>
<div id="footer">FOOTER</div>

/*----------center----------*/
#center{
    flex: 1;
    background: #DFD8D8;
    text-align: center;
    color: #dfd8d8;
}
复制代码



学习过程中参考了此篇文献

若文章内容有错误或不妥的地方,还请您在评论区指正,蟹蟹(❤´艸`❤)

关注下面的标签,发现更多相似文章
评论