订购弹性物品

Question

假设我有这个：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div><a href="#">1</a></div>
  <div><a href="#">2</a></div>
  <div><a href="#">3</a></div>
</div>

如何使用 flexbox 对项目进行排序，所以布局会是这样的？

我无法更改 HTML 中 div 的顺序，因为它会危及不同视图的布局。

Answer 1

如果你能切换到CSS Grid layout就很容易了：

• 在flex-cotainer元素上创建一个网格容器

• 将第二个元素放在第一列（使用grid-column: 1）跨越 2 行（使用grid-row: 1 / 3）。

请看下面的演示：

.flex-container {
  display: inline-grid;
  grid-template-columns: auto auto;
}

.flex-container div:nth-child(2) {
  grid-column: 1;
  grid-row: 1 / 3;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div><a href="#">1</a></div>
  <div><a href="#">2</a></div>
  <div><a href="#">3</a></div>
</div>

flexbox 解决方案是 hacky 充其量使用 负边距 和 已知 高度 - 见下文：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

.flex-container div:nth-child(1) {
  align-self: flex-start;
}

.flex-container div:nth-child(2) {
  order: -1;
  line-height: 170px;
}

.flex-container div:nth-child(3) {
  margin-left: auto;
  margin-top: -85px;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: calc(100px - 20px);
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div><a href="#">1</a></div>
  <div><a href="#">2</a></div>
  <div><a href="#">3</a></div>
</div>

Answer 2

您不应该为此使用 Flexbox，因为它不是为此而设计的。考虑改用 CSS Grid。使用grid-template-areas，将孩子分配到我们希望他们在布局中的位置成为一项微不足道的任务。网格子级的DOM 顺序变得无关紧要。

.grid-container {
  display: inline-grid;
  grid-template-areas: "two one"
                       "two three";
}

.grid-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

<div class="grid-container">
  <div class="one"><a href="#">1</a></div>
  <div class="two"><a href="#">2</a></div>
  <div class="three"><a href="#">3</a></div>
</div>

Answer 3

通过使用 row-reverse 而不是 row 作为 flex-direction 来反转行顺序。

flex-direction: row-reverse;

您还可以手动对子项进行排序，方法是为每个子项指定一个采用整数的 order 属性。

.flex-container :nth-child(1) { order: 3; }
.flex-container :nth-child(2) { order: 2; }
.flex-container :nth-child(3) { order: 1; }