Flexbox - центр вертикально второго ряда

Question

Я хотел бы расположить второй ряд в центре контейнера, но я не могу понять, как это сделать.align-self работает только в горизонтальном направлении - даже если для flex-direction установлено значение «столбец». jsfiddle

Answer 1

Трудно увидеть, что на самом деле происходит, потому что ширина .first и .second установлены на 100%.Если вы сделаете из них квадраты 50x50, вы увидите, что align-self работает на поперечной оси родительского контейнера, поэтому в этом случае он делает .second горизонтально центрированным.flexbox в течение секунды. Так: https://jsfiddle.net/Lygdk4xo/

Answer 2

Если вы не возражаете, добавьте третий пустой div.Вы можете центрировать второй div, установив justify-content в space-between.

Подробности, как показано ниже: HTML

<div class="container">
  <div class="first">
    first
  </div>
  <div class="second">
    second
  </div>
  <div class="third">

  </div>
</div>

CSS

.first, .second, .third {
  height: 50px;
  width: 100%;
}
.container {
  background-color: silver;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

Answer 3

Обычно вы можете установить вертикальные поля элемента с классом .second, чтобы автоматически центрировать его, но элемент с классом .first толкает центрированный элемент вниз от центра.Вы можете исправить это, установив transform: translateY(-50%) для центрированного элемента.

См. Ниже:

.second {
  align-self: center;
  background-color: purple;
  margin: auto 0;
  transform: translateY(-50%);
}