订购弹性物品 [英] Ordering flex items

问题描述

假设我有这个:

.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来订购商品，所以布局会像这样?

How can I use flexbox to order the items, so the layout would be like this?

我无法更改HTML中div的顺序，因为它会危害其他视图的布局.

I cannot change the order of the divs in the HTML, since it would jeopardize the layout of a different view.

推荐答案

如果您可以切换到

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

将第二个元素放置到第一列(使用grid-column: 1)跨越 2行(使用grid-row: 1 / 3).

place the second element to first column (using grid-column: 1) spanning 2 rows (using 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解决方案最多使用负边距和已知高度- -参见以下内容:

A flexbox solution is hacky at best using negative margins and known heights - see below:

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

这篇关于订购弹性物品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！