CSS | align-content 与 justify-content 的区别

1 概述

align-content 与 justify-content 是弹性布局、网格布局中的重要属性，决定容器内元素在容器内如何分布排列。

2 Justify-content：元素在主轴方向上的对齐方式

用法

justify-content:flex-start| flex-end| center| space-between| space-around| space-evenly;

• flex-start：从行首起始位置开始排列
• flex-end：从行尾位置开始排列
• center：居中排列
• space-between：均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
• space-evenly：均匀排列每个元素，每个元素之间的间隔相等
• space-around：均匀排列每个元素，每个元素周围分配相同的空间

3 align-item：占用交叉轴上所有可用的空间

3.1 用法

align-content:stretch | flex-start | flex-end | center | baseline;

• stretch：元素被拉伸以适应容器
• center：元素位于容器的中心
• flex-start：元素位于容器的开头
• flex-end：元素位于容器的结尾、
• space-between：元素位于各行之间留有空白的容器内
• space-around：元素位于各行之前、之间、之后都留有空白的容器内
• initial：设置该属性为它的默认值
• inherit：从父元素继承该属性