这篇文章将为大家详细讲解有关css中如何实现Flex布局的可伸缩性,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
Flexibility
Flex伸缩布局决定性的特性是让伸缩项目可伸缩,也就是让伸缩项目的宽度或高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的 扩展比率 分配剩余空间,也会按照 收缩比率 缩小各项目以避免溢出。
Flex属性
flex属性可用来指定 可伸缩长度 的部件:扩展比率,收缩比率,伸缩基准线。当有一个元素是伸项目时,flex属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目,则flex属性不生效。
flex 是 flex-grow、flex-shrink、flex-basis的缩写
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
<'flex-grow'> 取值为 <number> ,用来指定项目的扩展比率;若在flex缩写省略了此属性值,则flex-grow的指定值是 1;
<'flex-shrink'>取值为 <number> ,用来指定项目的收缩比率;若在flex缩写省略了此属性值,则flex-shrink的指定值是 1;
<'flex-basis'>取值为 <length> | auto ,用来定义在分配多余空间之前,项目占据的主轴空间,也就是子元素的基准值,flex-basis 规定的范围取决于 box-sizing;若在flex缩写省略了此属性值,则flex-basis的指定值是 0%。
flex-basis取值的几种情况:
固定的长度值,(比如350px),则该项目将占据固定长度的空间;
auto,首先会检索该项目的主尺寸(也就是该项目的width/height的值,是width还是height取决于主轴的方向,下面假设主轴的方向为水平方向),如果该项目的主尺寸不为auto,则该项目的flex-basis(基准值)采用主尺寸的值;如果该项目的主尺寸为auto(也就是width:auto或不设置项目的width属性时),则使用该项目的内容content大小为基准值;
百分比,根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为 auto 一样。
flex 的常见值
flex的默认值:由于 flex-grow、flex-shrink、flex-basis三个属性值在不设置的情况下默认值分别为 0、1、auto,所以flex的默认值为:flex:0 1 auto;
.item {
flex: 0 1 auto;
}
flex: 0 auto:由于之前提到过,若在flex的缩写中省略了flex-shrink的值,则该值指定为 1,所以flex:0 auto就相当于flex:0 1 auto(也就是与flex取默认值一样);
flex: initial:与flex:0 1 auto相同;
flex: auto: 若在flex的缩写中省略了flex-grow和flex-shrink的值,则他们的值都指定为 1,所以flex:auto就相当于flex:1 1 auto;
.item {
flex: auto;
}
flex:none:相当于flex: 0 0 auto;
.item {
flex: none;
}
当flex取值为某个正数时,则这个正数是flex-grow的取值,由于在flex的缩写中省略了flex-shrink和flex-basis的值,而他们在被省略了时的取值分别为1、0%,所以flex:1就相当于flex:1 1 0%;
.item {
flex: 1;
}
当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink 取 1(注意 0% 是一个百分比而不是一个非负数字);
.item {
flex:120px;
}
.item1 {
flex: 0%;
}
当 flex 取值为两个非负数字,则分别视为 flex-grow 和 flex-shrink 的值,flex-basis 取 0%;
.item {
flex:2 1;
}
当 flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow 和 flex-basis 的值,flex-shrink 取 1;
.item {
flex:2 120px;
}
举例
html如下:
<div class="box">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
css如下:
.box {
display: flex;
width: 800px;
}
.box > div {
height: 200px;
}
.item-1 {
width: 160px;
flex: 2 1 0%;
background: #2ecc71;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: #3498db;
}
.item-3 {
flex: 1 1 200px;
background: #9b59b6;
}
得到的结果如下:
主轴上父容器总尺寸为 800px
子元素的总基准值是:0% + auto + 200px = 300px,其中
- 0% 即 0 * 800px = 0宽度
- auto 对应取主尺寸即 100px
故剩余空间为 800px - 300px = 500px
伸缩放大系数之和为: 2 + 2 + 1 = 5
剩余空间分配如下:
- item-1 和 item-2 各分配 2/5,各得 200px
- item-3 分配 1/5,得 100px
各项目最终宽度为:
- item-1 = 0% + 200px = 200px
- item-2 = auto + 200px = 300px
- item-3 = 200px + 100px = 300px
当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 160px,也并没有什么用,形同虚设
而 item-2 基准值取 auto 的时候,根据规则基准值使用值是主尺寸值即 100px,故这 100px 不会纳入剩余空间
关于“css中如何实现Flex布局的可伸缩性”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。