flex中 align-items与justify-content的区别

先理解flex中的主轴与交叉轴是定义

Flex中提出了一个重要的概念——轴
默认情况下主轴是水平的
在这里插入图片描述
可以通过flex-direction来修改主轴方式。
flex-direction 属性规定灵活项目的方向

  • row 默认值。灵活的项目将水平显示，正如一个行一样
  • row-reverse 与 row 相同，但是以相反的顺序
  • column 灵活的项目将垂直显示，正如一个列一样
  • column-reverse 与 column 相同，但是以相反的顺序

row效果
在这里插入图片描述

在这里插入图片描述
row-reverse效果
在这里插入图片描述

在这里插入图片描述
column效果
在这里插入图片描述

在这里插入图片描述
column-reverse效果
在这里插入图片描述

在这里插入图片描述

align-items与justify-content的定义与区别

  • align-items属性定义了项目在主轴上的对齐方式，如下面默认的方向为从左到右

在这里插入图片描述

  • justify-content属性定义项目在交叉轴上如何对齐，如下面的方向为从上到下

在这里插入图片描述

小结

通过flex-direction确定了主轴方向，justify-content确定了再主轴方向的对齐方式，align-items确定了对应垂直方向的对齐方式，基本能满足各种对齐的需求