flex
容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direcition
决定主轴的方向(即项目的排列方向)
flex-wrap
默认情况下,项目都排在一条线(又称“轴线”)上。
flex-wrap
定义如果一条轴线排不下,如何换行
flex-flow
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
justify-content
定义了项目在主轴上的对齐方式
align-items
定义项目在交叉轴上如何对齐
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
项目的属性
- 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