flex布局：容器的六个属性（一）

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;