Заказ гибких предметов

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 для заказа элементов, чтобы макет был таким:

Я не могу изменить порядок элементов div в HTML, поскольку это может поставить под угрозу компоновку другого представления.

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-направления.

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; }