2.flex布局属性
容器属性
-
flex-flow
-
flex-direction
-
flex-wrap
-
justify-content
-
align-items
-
align-content
元素属性
-
order
-
flex-grow
-
flex-shrink
-
flex-basis
-
flex
-
align-self
3.flex弹性盒模型
3.1.主轴
flex-direction属性
取值:row(默认) | row-reverse(行反转) | column(列) | column-reverse
3.2.沿主轴的排列处理
flex-wrap属性
取值:nowrap(默认) | wrap | wrap-reverse 【决定是否换行】
3.3.flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。
3.4.justify-content(内容调整)属性
取值:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
flex-start(左对齐)
center (居中 )
flex-end (右对齐)
space-between (左右两端对齐,即左右两侧项目都紧贴容器,且项目之间间距相等 )
space-around (项目之间间距为左右两侧项目到容器间距的2倍 )
space-evenly (项目之间间距与项目与容器间距相等 )
3.5.align-items(侧轴对齐方式,垂直方向,交叉轴)属性
取值:flex-start | flex-end | center | baseline | stretch(默认)
flex-start(项目在交叉轴紧贴容器顶部 )
flex-end (与flex-start相反)
center (交叉轴中心位置排列 )
baseline (比较特殊,它让项目以第一行文字的基线为参照进行排列)
注意:常理来说justify-content与align-items默认分别处理项目主轴,交叉轴的对齐方式,但如果我们修改了flex-direction为column,它们处理的轴向会交换,也就是justify-content处理交叉轴,align-items处理主轴。
案例:想让一个子元素水平垂直居中
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
3.6.align-content属性
取值:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
flex-start ,center,flex-end 与align-items属性表现一致;
space-around(项目之间间距为上下两端项目与容器间距两倍 )
space-evenly (项目之间间距与项目到容器之间间距相等 )
space-between (上下两侧项目紧贴容器 )
注意:
align-items属性可以应用于所有的flex容器,它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。
align-content 只适用多行的flex容器(也就是flex容器中的子项不止一行时该属性才有效果),它的作用是当flex容器在交叉轴上有多余的空间时,将子项作为一个整体(属性值为:flex-start、flex-end、center时)进行对齐
3.8.order
取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。
3.9.flex-grow
取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。
假设默认三个项目中前两个个项目都是0,最后一个是1,最后的项目会占满剩余所有空间。
3.10.flex-shrink
取值:默认1,用于决定项目在空间不足时是否缩小,默认项目都是1,即空间不足时大家一起等比缩小;注意,即便设置了固定宽度,也会缩小。
但如果某个项目flex-shrink设置为0,则即便空间不够,自身也不缩小。
3.11.flex-basis
取值:默认auto,用于设置项目宽度,默认auto时,项目会保持默认宽度,或者以width为自身的宽度,但如果设置了flex-basis,权重会比width属性高,因此会覆盖widtn属性。
3.12.flex(推荐常用)
取值:默认0 1 auto,flex属性是flex-grow,flex-shrink与flex-basis三个属性的简写,用于定义项目放大,缩小与宽度。
该属性有两个快捷键值,分别是auto(1 1 auto)等分放大缩小,与none(0 0 auto)不放大不缩小。
还有最常用的flex:1即为flex-grow:1
3.13.align-self
取值:auto(默认) | flex-start | flex-end | center | baseline | stretch,表示继承父容器的align-items属性。如果没父元素,则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式,各值的表现与父容器的align-items属性完全一致。