Flexbox 实现栅格布局：使用 align-self 和 order

Flexbox 是一个现代的 CSS 布局技术，可以轻松地实现各种复杂的布局。在本文中，我们将重点介绍如何使用 align-self 和 order 属性来创建栅格布局。

什么是栅格布局？

栅格布局是一种常用于网页设计中的布局方式，通过将页面分成等宽的列和行，在其中放置内容以创建美观的网页布局。通常，每列都会采用相同的宽度，而每个项目则会采用相同的高度，从而使整个页面看起来非常整齐。

使用 align-self 属性

align-self 属性用于控制单个项目在交叉轴（cross axis）方向上的对齐方式。默认情况下，所有项目都将沿着交叉轴的默认方式进行对齐（通常为居中对齐）。但如果某个项目需要与其他项目不同的对齐方式，就可以使用 align-self 属性。

例如，假设我们有一个三列布局，其中第二列的高度比其他两列更高：

// javascriptcn.com code example
<div class="grid">
  <div class="item">1</div>
  <div class="item tall">2</div>
  <div class="item">3</div>
</div>

<style>
.grid {
  display: flex;
}
.item {
  flex: 1;
  height: 100px;
  background-color: gray;
}
.tall {
  height: 150px;
}
</style>

在这个示例中，第二列使用了 tall 类，以使其高度为 150 像素。如果我们想让该项目垂直居顶而不是居中，可以将 align-self 属性设置为 flex-start：

.tall {
  height: 150px;
  align-self: flex-start;
}

现在，第二列将位于网格的顶部，而其他两列仍将沿着默认的居中对齐方式进行对齐。

使用 order 属性

order 是另一个强大的 Flexbox 属性，它用于控制项目出现在容器中的顺序。默认情况下，项目按照它们在 HTML 中的顺序进行排序，但如果您需要更改项目的顺序，则可以使用 order 属性。

例如，假设我们有一个两列布局，其中第一列包含导航链接，而第二列包含主要内容：

// javascriptcn.com code example
<div class="grid">
  <div class="item nav">导航</div>
  <div class="item main">主要内容</div>
</div>

<style>
.grid {
  display: flex;
}
.item {
  flex: 1;
  height: 100px;
  background-color: gray;
  border: solid black 1px;
  padding: 10px;
  box-sizing: border-box;
}
.nav {
  order: -1;
}
</style>

在这个示例中，我们将第一列的 order 属性设置为 -1，这使得它在默认排序中出现在第二列之前。现在，导航链接将显示在主要内容之前，并且您可以通过调整 order 属性来轻松地改变它们之间的顺序。

结论

Flexbox 是一种非常有用的 CSS 布局技术，在创建复杂的栅格布局时尤其有用。通过使用 align-self 和 order 属性，您可以更精细地控制每个项目的对齐方式和顺序，从而获得美观、直观的布局。

希望本文能够帮助您理解 Flexbox 中的高级功能并提供一些指导，下面给出完整的示

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672d7ab5eedcc8a97c850f11