Flex 伸缩盒布局
flex布局的属性
容器属性
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-item
- align-content
元素属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
flex 弹性盒模型
采用flex布局的元素,称为flex容器,它的所有子元素自动成为容器成员,称为flex项目。
对某个元素声明display:flex;那么这个元素就成为了弹性容器,具有flex弹性布局的特性。
- 每个弹性容器都有两根轴:主轴和交叉轴,两轴之间成90度关系。注意:水平的不一定就是主轴。
- 每根轴都有起点和终点,这对于元素的对齐非常重要。
- 弹性容器中的所有子元素称为<弹性元素>,弹性元素永远沿主轴排列。
- 弹性元素也可以通过
display:flex
设置为另一个弹性容器,形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
弹性容器的两根轴非常重要,所有属性都是作用于轴的。
-
flex-direction
取值:row(默认) | row-reserve | colume | colume-reserve
用于控制项目的排列方向与顺序
-
flex-wrap
取值:nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行、换行顺序
-
flex-flow
flex-direction 和 flex-wrap 的简写形式,写法例如
flex-flow: row nowrap(默认);
-
justify-content
取值:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly
用于控制项目在主轴上的对齐方式,分别为左对齐,右对齐,居中,两端对齐,间隔相等,项目之间间隔相等。
-
align-item
取值:flex-strat | flex-end | center | baseline | stretch(默认)
用于控制项目在交叉轴排列方式,默认stretch即如果项目没有设置宽度则占满整个容器
baseline比较特殊,它让项目以第一行文字的基线为参照进行排列
-
align-content
取值:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)
用于控制多行项目的对齐方式,如果项目只有一行则不起作用。需要设置flex-wrap: wrap;默认stretch,即在项目没有设置高度,或高度为auto的情况下,让项目整个填满容器,与align-items类似。
项目属性
容器属性是加在父容器上的,那么项目属性就是加在项目上的,就好比容器属性设置给ul,
而项目属性设置给li一般。
-
order
取值: 默认是0,用于决定项目的排列顺序,数值越小,排列越靠前
.项目{
order:1
}
-
flex-grow
取值:默认是0,用于决定项目在剩余空间的情况下是否放大,默认不放大;注意,即使设置了固定宽度,也会放大。
如果某个项目设置了flex-grow:1;而其它项目属性为0,则该项目会占满剩余空间。
-
flex-shrink
取值:默认是1,用于决定项目在空间不足时是否缩小,默认项目都是1,即空间不足时大家一起等比缩小;注意,即便设置了固定宽度,也会缩小。
但是某个项目设置了flex-shrink 设置为0,则即便空间不足,自身也不缩小。
-
flex-basis
取值:默认为auto,用于设置项目的宽度,默认auto时,项目会保持默认宽度,或者以width为自身的宽度,但如果设置了flex-basis,权重会比width属性高,因此会覆盖width属性。
-
flex
取值:默认为 0 1 auto ,flex属性是flex-grow,flex-shrink,flex-basis的简写,用于将项目放大,缩小与是否定宽。
该属性有两个快捷键值,分别是auto(1 1 auto) 等分方法缩小,与none(0 0 auto) 不放大不缩小。
还有最常用的flex:1 === flex:1 1 0px;
-
flex-self
取值:auto(默认) | flex-start | flex-end | center | baseline | stretch ,表示继承父容器的align-item属性。如果没有父元素,则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式,各值的表现与父容器的align-item属性完全一致。