移动端flex布局(基础)(上一篇补充)

*这篇主要用来补充上一篇没说得完的 额 多少有点水的成分 但是内容比较少 也比较简单

如何设置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;

谢谢各位看到这!!!新手上路 有哪里说得不对 还望各位大佬指点一二

作者：秋刀鱼不过期A
链接：https://juejin.cn/post/7123556131275800607/
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。