弹性容器属性

2019独角兽企业重金招聘Python工程师标准>>>

flex-direction：设置主轴方向，确定子元素的排列方式

flex-wrap：当弹性子元素超出弹性容器是是否换行

flex-flow：flex-direction和flex-wrap复合属性

justify-content：主轴上对齐方式

align-items：侧轴上的对齐方式

align-content：侧轴上有空白时，侧轴的对齐方式

语法：flex-direction：row | row-reverse | column | column-reverse

row（默认值）：主轴为水平方向，排列顺序与页面文档的顺序相同。

row-reverse：主轴为水平方向，排列顺序与页面文档的顺序相反。

column：主轴为垂直方向，排列顺序与从上到下

column-reverse：主轴为垂直方向，排列顺序从下到上

语法：flex-wrap：nowrap | wrap | wrap-reverse

nowrap：溢出不换行

wrap：溢出时自动换行

wrap-reverse：溢出时自动换行，翻转排列

语法：justify-content：flex-start | flex-end | center | space-between | space-around

flex-start：主轴开始对齐，主轴为横轴，ltr环境下，左对齐

flex-end：主轴结束对齐，主轴为横轴，ltr环境下，右对齐

center：居中对齐

space-between：第一个和最后一个对齐容器边缘，其余均匀分布。

space-around：全部均匀分布

转载于:https://my.oschina.net/zhouhang0907/blog/537839