flex
容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direcition
决定主轴的方向(即项目的排列方向)
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap
默认情况下,项目都排在一条线(又称“轴线”)上。
flex-wrap
定义如果一条轴线排不下,如何换行
.box {
flex-wrap: nowrap | wrap | wrap-reverse
}
flex-flow
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
定义了项目在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | spaca-around;
}
align-items
定义项目在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
项目的属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex:1
flex:1 = flex: 1 1 0%; 可扩大,可缩小,flex-basis为0
flex属性是flex-grow
,flex-shrink
和flex-basis
的简写,默认值是0 1 auto。
flex-grow
是如果有剩余空间,是否扩大,1为扩大,0为不扩大
flex-shrink
是如果剩余空间不够,是否缩小,1为缩小
flex-basis
为项目本身的大小,默认值是auto