flex弹性盒子详细教程，看懂的支持一下嘛

flex是一种布局方式，它的主要目的是通过父盒子控制子盒子的排列方式。

主轴排列方式

默认的水平，但是可以转换。

1. 如果给父盒子添加 display: flex

   

    

2. justify-content: center;

   

    

3. justify-content: space-between; 左右两侧无缝隙

   

    

4. justify-content: space-around; 两倍关系

   

    

5. justify-content: space-evenly; 缝隙均等

   

    

侧轴对齐方式-单行对齐

1. 默认的对齐方式 flex-start

   

    

2. align-items: center; (重点)

   

    

侧轴对齐方式-多行

1. align-content: space-between;

   

    

2. align-content: space-around;

   

    

3. align-content: space-evenly;

   

    

4. align-content: center;

   

    

弹性盒子换行

特别是多行的情况下，我们需要给弹性盒子换行，给 父盒子 弹性容器加。

flex-wrap: wrap;

设置主轴方向

flex-direction: column;

让我们的主轴设置为垂直。 默认的是 row 水平的。