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

1、flex容器的六个属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

上篇文章讲了前面三个，这篇文章以实例的方法再理解一下后面的三个，尤其是justify-content、align-items这两个，用到的特别多。

2、justify-content属性定义了在主轴上的对齐方式

justify-content:flex-start;左对齐

左对齐

justify-content:flex-end;右对齐

右对齐

justify-content:center;居中对齐

居中

justify-content:space-between; 两端对齐，元素之间间距相等

屏幕快照 2017-05-16 下午7.37.22.png

justify-content:space-around; 元素两侧间隔相等。

每个元素两侧距离相等

3、align-items 属性定义了侧轴上的对齐方式

align-items:flex-start;侧轴起点对齐

屏幕快照 2017-05-16 下午7.50.46.png

align-items:flex-end;侧轴终点对齐

屏幕快照 2017-05-16 下午7.51.35.png

align-items:center; 侧轴居中对齐

屏幕快照 2017-05-16 下午7.53.06.png

align-items:baseline;基线对齐

屏幕快照 2017-05-16 下午7.55.54.png

4、align-content 属性定义了多根轴线的对齐方式，一根轴线不起作用；

align-content:flex-start; 与侧轴起点对齐

屏幕快照 2017-05-17 下午2.32.04.png

align-content:flex-end; 与侧轴终点对齐

屏幕快照 2017-05-17 下午2.33.04.png

align-content:center; 与侧轴中点对齐

屏幕快照 2017-05-17 下午2.34.25.png

align-content:space-between; 与侧轴两端对齐，轴线之间间隔平均分布

屏幕快照 2017-05-17 下午2.36.41.png

align-content:space-around; 轴线两侧间隔相等；

屏幕快照 2017-05-17 下午2.38.02.png