有没有一种方法可以动态地从网格或Flexbox中取出HTML元素

发布于01月12日

有没有一种方法，如果我有这样的网格:

.grid {
  display: grid;
  justify-content: start;
}

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

通过应用.right类，一些元素被从顺序中取出，放置在网格的末尾，并向右对齐(end).

我在努力实现这样的目标:

困难来自于事先不知道会有多少.left和.right件商品……

推荐答案

Flexbox可以在适当的元素上使用order和margin来做到这一点.

我们还可以利用:nth-child(n of x)来 Select 要应用边距的第一个分类元素.

Support个

.flexy {
  display: flex;
  margin-top: 25px;
}

.item {
  border: 1px solid grey;
  padding: 0.25em;
}

:nth-child(1 of .right) {
  margin-left: auto;
}

.right {
  order: 2;
}

<div class="flexy">
  <div class="item">Item 1</div>
  <div class="item right">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item right">Item 4</div>
</div>

<div class="flexy">
  <div class="item">Item 1</div>
  <div class="item right">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item right">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item right">Item 6</div>
</div>