Flexbox 之间的空间 - CSS

CSS Flexbox 是一个响应式布局模型，旨在实现不同尺寸屏幕上的弹性和可伸缩的界面。

其中，flexbox 提供了一些属性，用于控制 flex 容器（flex container）内部众多元素（flex item）之间的空间。这些属性包括：

• justify-content
• align-items
• align-content
• flex-wrap

justify-content

这个属性控制了 flex item 在主轴（主要方向）上的分布方式。它可以设置为以下值：

• flex-start：所有 flex item 都靠主轴的起点对齐；
• flex-end：所有 flex item 都靠主轴的末尾对齐；
• center：所有 flex item 都在主轴上居中对齐；
• space-between：所有 flex item 平均分布在主轴上，且第一个和最后一个元素分别与 flex container 的起点和末尾对齐；
• space-around：所有 flex item 平均分布在主轴上，且两个 flex item 之间的空白间隔相等；

.flex-container {
  display: flex;
  justify-content: space-between;
}

align-items

这个属性控制了 flex item 在交叉轴（主轴的垂直方向）上的分布方式。它可以设置为以下值：

• flex-start：所有 flex item 都靠交叉轴的起点对齐；
• flex-end：所有 flex item 都靠交叉轴的末尾对齐；
• center：所有 flex item 都在交叉轴上居中对齐；
• baseline：所有 flex item 的基线对齐；
• stretch：所有 flex item 拉伸填充 flex container 的高度；

.flex-container {
  display: flex;
  align-items: center;
}

align-content

这个属性专门用于控制多行或多列 flex item 在交叉轴上的分布方式。它可以设置为以下值：

• flex-start：flex item 在交叉轴上的起点对齐；
• flex-end：flex item 在交叉轴上的末尾对齐；
• center：flex item 在交叉轴上居中对齐；
• space-between：flex item 平均分布在交叉轴上，且第一个和最后一个元素分别与 flex container 的起点和末尾对齐；
• space-around：flex item 平均分布在交叉轴上，且两个 flex item 之间的空白间隔相等；
• stretch：flex item 拉伸填充 flex container 的高度；

值得注意的是，该属性只对 flex-wrap: wrap 状态下的多行或多列 flex item 生效。

.flex-container {
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}

flex-wrap

这个属性控制了 flex item 是否可以换行。默认情况下，flex item 不会换行，而是尽量压缩以适应一行内的所有元素。

它可以设置为以下值：

• nowrap：所有 flex item 不允许换行，而是尽量压缩以适应一行内的所有元素；
• wrap：如果有需要，flex item 可以进行换行；
• wrap-reverse：如果有需要，flex item 可以进行反向换行；

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

通过上述介绍，我们可以更好地控制和调整 flex container 内部各个元素之间的空间和位置。