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
取值的几种情况:
auto
,首先会检索该项目的主尺寸(也就是该项目的width/height
的值,是width
还是height
取决于主轴的方向,下面假设主轴的方向为水平方向),如果该项目的主尺寸不为auto
,则该项目的flex-basis
(基准值)采用主尺寸的值;如果该项目的主尺寸为auto
(也就是width:auto
或不设置项目的width
属性时),则使用该项目的内容content
大小为基准值;flex-grow
、flex-shrink
、flex-basis
三个属性值在不设置的情况下默认值分别为 0、1、auto,所以flex的默认值为:flex:0 1 auto
; .item {
flex: 0 1 auto;
}
/*这种情况先根据width/height属性决定元素的尺寸。
(如果项目的主尺寸为auto,则会以其内容大小为基准)
当剩余空间为正值时,伸缩项目无法伸缩,但当空间不足时,伸缩项目可收缩至其[最小]值。
默认状态下,伸缩项目不会收缩至比其最小内容尺寸更小。
可以通过设置「min-width」或「min-height」属性来改变这个默认状态。*/
flex
的缩写中省略了flex-shrink
的值,则该值指定为 1,所以flex:0 auto
就相当于flex:0 1 auto
(也就是与flex取默认值一样);flex:0 1 auto
相同;flex
的缩写中省略了flex-grow
和flex-shrink
的值,则他们的值都指定为 1,所以flex:auto
就相当于flex:1 1 auto
; .item {
flex: auto; /*相当于flex:1 1 auto;*/
}
/*根据width/height属性决定元素的尺寸,但是完全可以伸缩,会吸收主轴上剩下的空间*/
flex: 0 0 auto
; .item {
flex: none; /*相当于flex:0 0 auto;*/
}
/*根据width/height属性决定元素的尺寸,但是完全不可以伸缩*/
flex-grow
的取值,由于在flex
的缩写中省略了flex-shrink
和flex-basis
的值,而他们在被省略了时的取值分别为1、0%,所以flex:1
就相当于flex:1 1 0%
; .item {
flex: 1; /*相当于flex:1 1 0%;*/
}
/*以父容器的宽度为基数计算,元素完全可伸缩*/
flex-basis
值,flex-grow
取 1,flex-shrink
取 1(注意 0% 是一个百分比而不是一个非负数字); .item {
flex:120px; /*相当于flex:1 1 120px;*/
}
.item1 {
flex: 0%; /*相当于flex:1 1 0%;*/
}
flex-grow
和 flex-shrink
的值,flex-basis
取 0%; .item {
flex:2 1; /*相当于flex:2 1 0%;*/
}
flex-grow
和 flex-basis
的值,flex-shrink
取 1; .item {
flex:2 120px; /*相当于flex:2 1 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;
}
- 0% 即 0 * 800px = 0宽度
- auto 对应取主尺寸即 100px
- 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
flex
的缺省值并非是单一属性的初始值,在flex属性取值的缩写中,flex-grow
、 flex-shrink
、flex-basis
的缺省值分别为1 、 1 、0%,而不是这三属性分别的默认值0、 1 、auto;flex-basis
如果也是auto,那么flex-basis
的使用值就是该项目的内容本身撑起来的宽度(对于水平的情况)。