有没有办法从网格或弹性框中动态取出HTML元素？

Question

有没有办法，如果我有这样的网格：

.grid {
  display: flex;
  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

物品...

Answer 1

Flexbox 可以在适当的元素上使用

order

和

margin

来实现这一点。

我们还可以利用

:nth-child(n of x)

来选择要应用边距的第一个分类元素。

支持

.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>