*这篇主要用来补充上一篇没说得完的 额 多少有点水的成分 但是内容比较少 也比较简单
如何设置flex布局当中主轴的方向
咱们都知道在flex布局当中主轴的默认排列方向是水平方向 也可以说是x轴 侧轴(交叉轴)的默认排序方向是垂直方向(相当于y轴)
调整主轴的方向 也是为了方便咱们布局 这里要用到的语法属性是 flex-direction：column;
如下表 取值内容
| 属性值 | 作用 |
|---|---|
row | 行, 水平(默认值) |
column | *列, 垂直 |
| row-reverse | 行, 从右向左 |
| column-reverse | 列, 从下向上 |
column属性值能让主轴从水平方向排列改成垂直方向排列
弹性盒子换行(重要)
特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。
具体语法表示: flex-wrap: wrap;
一般配合侧轴的多行垂直对齐使用 下面会提到 特别是多行的情况下，我们需要给弹性盒子换行，给 父盒子 弹性容器加。
侧轴的对齐方式
1.align-content设置侧轴多行的垂直对齐方式
2.align-items设置侧轴单行垂直对齐(使用比较多)
下表为(侧轴多行对齐方式取值)和主轴对齐方式基本一致
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
总结梳理一下 主轴的排列方式
1.如果给父盒子添加 display: flex
默认情况下就是从左边开始 水平排列
2.justify-content: center;水平居中
3.justify-content: space-between;左右两侧无缝隙
4.justify-content: space-around;(两倍关系)
5.justify-content: space-evenly; 缝隙均等
下面则是侧轴单行对齐方式(重点) 1.默认的对齐方式 stretch 拉伸
2.顶对齐 flex-start
3.align-items: center; (重点)
侧轴多行对齐方式
取值和主轴对齐方式一样 我就不多叙述了 看图
1.align-content: space-between;
2.align-content: space-around;
3.align-content: space-evenly;(画的不太清楚哈 和上面的区别就是两边间隙和中间间隙的区别)
4.align-content: center;
谢谢各位看到这!!!新手上路 有哪里说得不对 还望各位大佬指点一二
