Flexbox 是一种 CSS 布局模式，可以将容器中的元素排列在一个或多个轴上。在使用 Flexbox 进行布局时，有时我们需要将每个元素分别放置在自己的行或列中，尤其是当我们在进行自适应布局（例如响应式布局）时。本文将介绍如何使用 Flexbox 实现这种布局。
主轴和交叉轴
在使用 Flexbox 进行布局时，元素所在的行或列由 Flexbox 的主轴和交叉轴决定。默认情况下，Flexbox 会将元素沿着主轴排列，并将交叉轴用于对元素进行对齐。
在以下示例中，我们创建了一个 Flexbox 容器，并在其中放置了三个元素：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ------ ------ ------- ------ ------- --- ----- ------ ------- ----- -
在上面的代码中，我们将 .container 容器设置为 Flexbox 布局，并设置 flex-wrap 属性为 wrap，以允许元素在需要时换行。我们还将 .item 元素设置为等宽等高的正方形，以使它们更加易于对齐。
在默认情况下，上述代码将在一个横向的单行中排列三个元素，如下所示：
使用 Flexbox 的主轴排列
要将每个元素放置在自己的行或列中，我们可以使用 Flexbox 的主轴排列（flex-direction 属性）。将 flex-direction 属性设置为 column 可以使元素纵向排列，在这种情况下，每个元素将独自占据一行。例如：
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}这将产生以下结果：
可以看到，在使用主轴纵向排列时，每个元素都被放置在自己的行中。但是，这样做将使元素在内部对齐时看起来更加困难，因为它们被分布在多个行中。为了解决这个问题，我们可以使用交叉轴对齐来控制元素的位置。
使用交叉轴对齐
Flexbox 提供了许多选项来调整元素在交叉轴上的位置。其中最常见的选项是 align-items 属性。该属性用于将元素与交叉轴上的基线对齐。例如，将 align-items 设置为 center 可以使元素始终垂直居中。例如：
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}这将产生以下结果：
可以看到，在对称对齐的情况下，每个元素都被放置在自己的行中，并且它们都与容器的中心线对齐。
此外，还可以使用 justify-content 属性将元素与主轴上的基线对齐。例如，将 justify-content 设置为 center 可以使元素始终水平居中。
根据需求调整布局
Flexbox 布局非常灵活，可以根据需要调整布局。例如，在我们的示例中，如果希望在容器中有两个元素一行，有一个元素一行，则可以根据需要调整 .item 的宽度。例如：
@media screen and (min-width: 500px) {
.item {
width: calc((100% - 20px) / 2); /* 首先减去元素边距，然后分为两半 */
}
}在上面的代码中，我们使用媒体查询来仅在屏幕宽度大于或等于 500 像素时应用样式。我们还使用 calc() 函数来计算每个元素的宽度，这样它们可以平均地分成两半，并且每个元素占据一半的容器宽度。这将产生以下结果：
可以看到，通过适当调整样式，我们可以使元素按照需求在容器中排成单独的行或按多个元素一行的方式排列。
结论
在本文中，我们学习了如何在 Flexbox 布局中将每个元素放置在自己的行或列中。这种对称对齐方式既实用又美观，并且适用于许多情况，特别是在进行响应式布局时。通过使用主轴或交叉轴对齐，我们可以控制每个元素的位置，并根据需要调整布局。希望这篇文章对你有所帮助，并让你对 Flexbox 布局更有信心。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671aa07e9babaf620fa490e1