持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情
flex container属性
1.flex-direction
flex items默认都是沿着main axis(主轴)从 main start开始往main end方向排布
flex-direction决定了main axis的方向，有4个取值
row(默认值)、row-reverse、column、column-reverse
2.flex-wrap
flex-wrap决定了flex container是单行还是多行
nowrap(默认)∶单行
wrap:多行
wrap-reverse: 多行(对比 wrap,cross start 与cross end相反)
3.flex-flow
flex-flow属性是flex-direction和flex-wrap 的简写。
顺序任何,并且都可以省略;
4.justify-content
justify-content决定了flex items在main axis 上的对齐方式
flex-start（默认值)︰与main start对齐
flex-end: 与main end对齐
center:居中对齐
space-between:
flex items 之间的距离相等
与main start、main end两端对齐
space-around :
flex items 之间的距离相等
flex items与main start、main end之间的距离是flex items之间距离的一半
space-evenly:
flex items之间的距离相等
flex items 与main start、main end 之间的距离等于flex items 之间的距离
5.align-items
align-items决定了flex items在 cross axis 上的对齐方式
normal:在弹性布局中，效果和stretch一样
stretch:当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
flex-start: 与cross start对齐
flex-end:与cross end对齐
center:居中对齐
baseline:与基准线对齐
6.align-content
align-content决定了多行flex items在 cross axis 上的对齐方式，用法与justify-content类似
stretch(默认值)︰与align-items的 stretch类似
flex-start: 与cross start对齐
flex-end: 与cross end对齐
center:居中对齐
space-between:
flex items 之间的距离相等
与cross start、cross end两端对齐
space-around :
flex items之间的距离相等
flex items 与cross start、cross end之间的距离是flex items之间距离的一半
space-evenly:
flex items之间的距离相等
flex items 与cross start、cross end之间的距离等于flex items之间的距离
