Flex布局中默认的主轴是row,x轴
-
如果想改变主轴方向可通过设置flex-direction来改变
- flex-direction:column;将主轴改为y轴,纵轴
- flex-direction:row; 将主轴改为x轴,横轴
- flex-direction:row-reverse;主轴为x轴,并且翻转
- flex-direction:column-reverse;主轴为y轴,并且翻转
-
通过justify-content能够设置主轴子元素排列形式
- 值为flex-start 所有子元素在主轴头部显示
- 值为flex-end 所有子元素在主轴尾部显示
- 值为flex-center 所有子元素在主轴居中对齐
- 值为space-around 所有子元素平分剩余空间
- 值为space-between 所有子元素先两边贴边在平分剩余空间
-
通过align-items能够设置侧轴元素对齐的方式在子项为单项(单行)的时候使用
- 值为flex-start 表示从头开始
- 值为flex-end 表示从结尾开始
- 值为center 表示居中显示
- 值为stretch 会将子元素拉伸
-
通过Align-content适应于换行(多行)的情况下(单行情况下无效)
- 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值
-
Flex-flow就是flex-direction和flex-wrap的合写