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
网友评论