1、flex的容器共有六个属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2、flex-direction
flex-direction决定主轴的方向，它包括row, row-reverse, column, column四个值
flex-direction:row;
默认是row，从左向右排列元素
屏幕快照 2017-05-15 上午8.47.21.png
flex-direction:row-reverse;在主轴上从右往左排列
屏幕快照 2017-05-15 上午8.49.08.png
column相似
flex-direction:column; 从上往下排列元素
flex-direction:column-reverse; 从下往上排列元素
2、flex-wrap 折行
它有三个值：wrap（空间不足时换行），nowrap（空间不足时也换行，会挤在一起,这也是默认值），wrap-reverse(换行，但是第一行在下面)
flex-wrap:wrap;
屏幕快照 2017-05-15 上午9.02.21.png
flex-wrap:wrap-reverse;
屏幕快照 2017-05-15 上午9.03.35.png
3、flex-flow
flex-flow是flex-direction和flex-wrap简写形式，默认值：
flex-flow:row,nowrap;
网友评论