CSS中justify-content与align-items使用

前言

    在flex布局和grid布局中元素居中通常会用到justify-content 和 align-items属性。

    grid布局主轴方向为水平方向，次轴（又叫交叉轴）方向为垂直方向。

    flex布局主轴方向为flex-direction方向，次轴是与主轴垂直的方向

justify-content与align-items使用

一、justify-content

作用：设置主轴方向的对齐方式

属性值：

① start ：按主轴起点对齐（如果主轴是水平方向，则为左对齐；垂直方向，则为顶部对齐）

② center： 按主轴居中对齐

③ end： 按主轴结束点对齐（如果主轴是水平方向，则为右对齐；垂直方向，则为底部对齐）

④ space-around： 在主轴方向上，元素均匀分布

⑤ space-between： 在主轴方向上，两边元素贴边，其余元素均匀分布

二、align-items

作用：设置次轴方向的对齐方式

属性值：

① start： 按次轴起点对齐（如果次轴是水平方向，则为左对齐；垂直方向，则为顶部对齐）

② center： 按次轴居中对齐

③ end： 按次轴结束点对齐（如果次轴是水平方向，则为右对齐；垂直方向，则为底部对齐）

三、常用组合

① 令盒子内元素水平居中，垂直居中

display: flex;
justify-content: center;
align-items: center;

② 令盒子内水平方向两侧元素靠边，其余元素平均分配，垂直方向居中

display: flex;
justify-content: space-between;
align-items: center;

③ 令盒子内水平方向平均分配，垂直方向居中

display: flex;
justify-content: space-around;
align-items: center;