常见父元素属性（必须掌握）

image.png

概念了解：主轴和侧轴

image.png

1. flex-direction 设置主轴的方向（重要）

用于修改子项目的排列方向
image.png
这个属性就可以让行内元素进行上下排列，让块级元素进行横向排列了。

2. justify-content 设置主轴上的子元素的排列方式（非常重要）

image.png
其中space-between是很常见也很重要的属性，可以先让两边的子元素贴边，再平均分配剩下的空间给其他子元素。
image.png
现在 实现子元素垂直居中只需要两步了

  1.         div {
  2.             /* 1.一定要给父元素设置flex布局，使其成为flex容器 */
  3.             display: flex;
  4.             background-color: pink;
  5.             height: 500px;
  6.             width: 80%;
  8.             /* flex父元素属性 */
  9.             /* 2.设置主轴为列，即y轴从上到下 */
  10.             flex-direction: column;
  11.             /* 3.设置主轴上子元素的排列方式为居中 */
  12.             justify-content: center;
  14.         }

3. flex-wrap 设置子元素是否换行

wrap：包裹，包装。意思就是是否要将元素包裹在盒子里而不压缩元素即换行。nowrap代表不换行，wrap代表换行
image.png
这个属性是针对当一行中无法摆放所有的盒子时，产生的效果。在传统浮动布局下：
image.png
但在默认的flex布局下，默认是不换行的：
image.png

4. align-items 设置侧轴上的子元素排列方式（单行）

我们知道了，子元素是根据主轴排列的，但是也有设置元素在侧轴上的排列方式，这个方法可以用于让子元素同时垂直和水平居中。
image.png
注意了解：其中使用拉伸stretch属性时，子元素不要设置高度（或宽度），会自动拉伸到和父盒子一样高（或宽）
并且align-items只适用于子元素单行的情况，在多行时表现并不好，因为它并没有space-around和space-between属性。

5. align-content 设置侧轴上的子元素排列方式（多行）*重要

注意注意！ 这个属性在只有这个属性时对单行是无效的，和align-items各司其职！
但是，如果同时设置了flex-wrap:wrap则代表强制多行，此时align-content对单行也会生效！
image.png
image.png

对比

image.png

6. flex-flow

image.png

遇到的问题（坑）

1.关于子级flex容器和副轴align-items属性

如果在一个flex盒子中，由另一个子flex盒子，则子盒子会根据子级的设置来继承父盒子的主轴长度。比如子级div就会继承父级在主轴上的宽度，如果子级设置主轴为column则继承高度。但是！在设置了副轴align-items的属性后，将不会继承父级盒子的宽度！！！
没设置align-items:center属性，可以继承主轴宽度
image.png
设置了align-items:center属性后，将不会继承宽度！！
image.png