代码之家 › 专栏 › 技术社区 › Laczkó Örs

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

css-grid flexbox css html

Laczkó Örs · 技术社区 · 2 年前

如果我有这样一个网格,有没有办法:

.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 和 正确的 项目将有。。。

1 回复 | 直到 2 年前

Paulie_D 2 年前

Flexbox可以通过 order 和 margin 关于适当的元素。

我们还可以利用 :nth-child(n of x) 以选择要对其应用边距的第一个分类元素。

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>