网格布局中如何控制元素的排列顺序？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常使用网格布局来构建网页的 UI 界面。网格布局可以灵活地控制元素的位置和大小。但是，当网格布局的多个子元素需要按照不同的顺序排列时，我们该如何实现呢？本文将介绍网格布局中如何控制元素的排列顺序。

控制元素顺序的属性

在网格布局中，我们可以使用 order 属性来控制元素的排列顺序。默认情况下，网格布局会按照文档流中元素的顺序进行排列。但是，当我们需要改变元素的排列顺序时，就可以使用 order 属性。

order 属性接受一个整数值作为参数，数值越小，元素越靠前，数值越大，元素越靠后。如果多个元素有相同的 order 值，它们将按照文档流中的顺序排列。

下面是一个简单的示例。假设我们有一个网格布局，其中包含三个子元素，它们的初始顺序是 1、2、3，现在我们要将它们的顺序改为 3、1、2：

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

在上面的代码中，我们使用 style 属性为元素设置了 order 值，这是一种简单的方式，但不是最佳实践。实际上，我们应该将样式定义在 CSS 中，如下所示：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  text-align: center;
  padding: 20px;
  background-color: #ddd;
  border: 1px solid #aaa;
}

.item:nth-child(2) {
  order: 3;
}

.item:nth-child(3) {
  order: 2;
}

在上面的代码中，我们使用 nth-child 选择器选择需要设置 order 值的元素，并将样式定义在 CSS 中。

案例分析

下面我们将介绍一个更加复杂的案例，展示如何在网格布局中控制元素的排列顺序。

页面结构如下图所示：

我们需要将这个页面在窄屏幕下的布局改变为：

我们可以通过网格布局来实现这个布局。首先，我们需要将页面结构分为两个网格，一个是顶部网格，另一个是底部网格，它们之间的分界线是 Log In/Register 按钮。顶部网格包含两个子元素，一个是标题，另一个是菜单。底部网格包含一个搜索框和一些文章。

实现这个布局需要一些技巧。我们需要使用 grid-template-areas 属性来定义网格的布局，使用 grid-row 来设置元素所在的行，使用 order 来设置元素在行内的顺序。

下面是代码示例：

// javascriptcn.com 代码示例
<div class="container">
  <div class="header">
    <h1>My Blog</h1>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Archives</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="actions">
    <button class="login">Log In / Register</button>
    <form class="search">
      <input type="text" placeholder="Search">
      <button type="submit">Go</button>
    </form>
  </div>
  <div class="articles">
    <div class="article">Article 1</div>
    <div class="article">Article 2</div>
    <div class="article">Article 3</div>
  </div>
</div>

// javascriptcn.com 代码示例
.container {
  display: grid;
  gap: 20px;
  grid-template-areas: 
    "header header"
    ". actions"
    "articles articles";
  grid-template-columns: 1fr 200px;
}

.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu {
  list-style: none;
  display: flex;
}

.menu li + li {
  margin-left: 10px;
}

.actions {
  grid-row: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login {
  background-color: #222;
  color: #fff;
  border: none;
  padding: 10px 20px;
}

.login:hover {
  background-color: #555;
}

.search {
  display: flex;
}

.search input[type="text"] {
  width: 100%;
  height: 30px;
  padding: 5px;
  border: 1px solid #aaa;
  border-right: none;
}

.search button[type="submit"] {
  height: 30px;
  padding: 0 10px;
  background-color: #222;
  color: #fff;
  border: none;
}

.search button[type="submit"]:hover {
  background-color: #555;
}

.articles {
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.article {
  background-color: #eee;
  padding: 20px;
  border: 1px solid #aaa;
}

首先，我们使用 grid-template-areas 属性定义了三个区域，分别是上面的标题和菜单，中间的 Log In/Register 按钮和搜索框，以及下面的文章。其中，顶部区域使用了 header，底部区域使用了 articles，中间区域使用了 actions。

然后，我们通过给顶部区域的元素指定顺序，使得标题在左侧，菜单在右侧。我们还通过设置中间区域元素的 grid-row 属性，使它们在第二行。

最后，我们通过设置文章元素的宽度和 grid-template-columns 属性，使得它们排成了三列。注意，我们并没有直接设置元素的顺序，因为这些元素默认按照文档流中的顺序排列，我们只需要将元素排成正确的顺序，在网格布局中它们就会按照我们想要的顺序排列了。

总结

网格布局是一种强大的布局方式，它可以灵活地控制元素的位置和大小。 order 属性是网格布局中用于控制元素顺序的重要属性，它可以让我们轻松地改变网格布局中元素的排列顺序。以上就是本文的全部内容，希望能够帮助大家更好地掌握网格布局。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652b30c57d4982a6ebd34973