Как переопределить направление столбца для одного элемента, который является частью гибкого контейнера направления столбца?

Question

Если у меня есть flex-контейнер с flex-direction: column, допустим, этот контейнер содержит три деления.

Мой вопрос таков: как сделать так, чтобы второй div отображался в строке с первым, а третий имеет эффект направления столбца без изменения этой HTML-формулы:

.flex-container {
  display: flex;
  align-items: center;
}

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

Мне нужно сделать это без изменения html, есть ли способ добиться этого только css ??

Answer 1

Используйте свойство CSS order для переупорядочения элементов в контейнере.

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  align-content: flex-start;
}

.flex-container > div {
  flex: 0 0 40px;
  width: 50px;
}

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

/* non-essential decorative styles */
.flex-container {
  background-color: lightgray;
}
.flex-container > div {
  margin: 5px;
  border: 1px solid black;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
* {
  box-sizing: border-box;
}

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

Answer 2

Вы либо

• помещаете первые два деления в оболочку с display:flex (1)
• или изменяете направление родителя на row, даете ему flex-wrap:wrap идать третий div min-width: 100% (2)

(1)

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-container > *:first-child{
  display: flex;
  align-self: stretch;
  justify-content: space-around;
}

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

(2)

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.flex-container > *:last-child{
  min-width: 100%;
  text-align: center;
}

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