📌  相关文章
📜  基础 CSS Flex 网格列对齐(1)

📅  最后修改于: 2023-12-03 15:08:08.263000             🧑  作者: Mango

基础 CSS Flex 网格列对齐

CSS Flexbox 是 CSS3 中的弹性布局模块，用于管理 HTML 元素的布局。本文将介绍使用 Flexbox 对网格列进行对齐的基础知识。

基本概念

Flexbox 是基于容器和项目之间的关系进行工作的。容器是指应用弹性布局的 HTML 元素，项目是容器内的其它 HTML 元素。

弹性布局的核心概念是主轴和交叉轴。主轴是指 Flexbox 中的水平方向，而交叉轴是指垂直方向。

在一个 Flexbox 容器中，主轴的方向由flex-direction属性决定，它可以取以下四个值中的一个：row（水平方向）、row-reverse（反向水平方向）、column（垂直方向）和 column-reverse（反向垂直方向）。

Flexbox 中的项目默认沿主轴排列，并通过justify-content属性控制项目在主轴上的对齐方式。flex-start值表示所有项目位于容器的起始端，flex-end值表示所有项目位于容器的末端，center值表示所有项目都居中排列，space-between值将项目平均分布在容器中，space-around值将项目均匀分布在容器中，但两端的项目离边缘更远，中间的项目间距更小。

在 Flexbox 中，通过align-items属性控制项目在交叉轴上的对齐方式。stretch值表示所有项目在交叉轴上拉伸至容器的完整高度，flex-start值表示所有项目在交叉轴上位于容器的顶部，flex-end值表示所有项目在交叉轴上位于容器的底部，center值表示所有项目在交叉轴上居中对齐，baseline值表示所有项目在交叉轴上基线对齐。

简单实例

假设我们有一个包含 3 个项目的容器。接下来，我们将通过使用简单的 HTML 和 CSS 来展示如何使用 Flexbox 对项目进行对齐。

下面是 HTML 的代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

现在，让我们使用 CSS 进行样式设置，以便将项目展示为行。在容器上设置 display: flex 属性可以将容器转换为 Flexbox 容器。通过使用 justify-content 属性，我们可以对容器中的项目进行水平对齐，使用 align-items 属性可以对项目进行垂直对齐。

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

此时，我们的代码已经实现了在主轴水平分布项目，并且在交叉轴上居中对齐的功能。

改变对齐方式

我们可以使用justify-content将项目在主轴上的对齐方式改为中心对齐，在交叉轴上的对齐方式改为底部对齐。

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

现在，我们将所有项目水平居中对齐，并且底部对齐。

指定项目顺序

除了通过justify-content和align-items来对项目进行对齐外，我们还可以在 HTML 元素的order属性中指定项目的顺序。

例如，我们可以将第二个项目移动到第一位，而将第一个项目移到最后。

<div class="container">
  <div class="item" style="order: 2">Item 2</div>
  <div class="item" style="order: 1">Item 1</div>
  <div class="item" style="order: 3">Item 3</div>
</div>

使用order属性调整项目顺序后，我们需要重新调整对齐样式以适应新的顺序。

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
总结

本文介绍了使用 CSS Flexbox 网格列对齐的基础知识，包括主轴、交叉轴、justify-content、align-items和order属性。使用这些属性可以轻松地控制项目在 Flexbox 容器中的布局。

参考文献