flex容器属性演示
（1）flex-direction 排列方向
flex-direction：
row（默认值）
row-reverse
column
column-reverse
1
2
3
（2）flex-wrap 换行方式
flex-wrap：
nowrap（默认值）
wrap
wrap-reverse
nowrap不换行的状态下，容器的宽度会被压缩
1
2
3
4
5
（3）justify-content 主轴对齐方式
justify-content：
flex-start（默认值）
center
flex-end
space-between
space-around
space-evenly
1
2
3
（4）align-items 交叉轴对齐方式
align-items：
flex-start
center
flex-end
baseline（所有项目的第一行文字的基线对齐）
stretch（默认值，如果项目未设置hegiht或者为auto，占满整个交叉轴高度）
1
2
3
4
5
（5）flex-flow flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
（6）align-content 多根轴线的对齐方式（如果项目只有一根轴线，该属性不起作用！）
align-content：
flex-start
center
flex-end
space-between
space-around
stretch（轴线占满整个交叉轴）
flex容器需要设置一个高度，才能体现出align-content不同值的表现差异（默认情况下，高度是由内容撑开的）
1
2
3
4
5
返回首页