订购弹性物品

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解决方案最多使用负边距和已知高度- -参见以下内容：

.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: row-reverse;

您还可以通过为每个子项赋予一个带有整数的order属性来对其进行手动排序。

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