Вертикальное выравнивание flexbox - PullRequest
Новая
       42

Вертикальное выравнивание flexbox

0 голосов
/ 04 июля 2019

Я пытаюсь поместить дочерние элементы в родительский элемент, используя flexbox, как на этом изображении -> https://ibb.co/Wpph8fP.

Я знаю, что это возможно, если сделать три столбца, затем использовать flex, затем flex-column впервый столбец и центр двух других по вертикали.

Дело в том, что мне нужно сделать это в одном родительском div.4-й элемент оборачивается и создает столбец с 1-м элементом, тогда мне нужно центрировать по вертикали два других элемента.

Это то, что я уже сделал:

the code is here https://codepen.io/MrEyelet/pen/wLxygN?editors=1100

1 Ответ

1 голос
/ 04 июля 2019

  1. Чтобы использовать один изгиб, сначала установите flex-direction на столбец и установите обтекание на flex-wrap.

  2. И часть, которая должна быть на двух линиях, имеет переменную высоту, чтобы избежать разрывов строк.

  3. Затем установите для свойства flex значение none, установив margin достаточно, чтобы сделать разрыв строки в той части, которая должна находиться в одной строке. Это заставит гибкие элементы ломаться и сохранять размер элемента.

    flex - Значения [мдн]

    none Размер изделия определяется в соответствии с его свойствами width и height. Он полностью негибкий: он не сжимается и не увеличивается по отношению к гибкому контейнеру. Это эквивалентно настройке "flex: 0 0 auto". 

body {
  background: tomato;
  margin: 0;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  height: 100vh;
}

.child {
  width: 30%;
  height: 200px;
  margin: 20px 0;
  background: indigo;
}


/* add below */
.child:nth-of-type(-n+2) {
  flex: 1 0 calc(50% - 40px);
}


/* add below */
.child:nth-of-type(n+3) {
  flex: none;
  margin: 50% 0;
}
<div class="parent">
  <div class="child child-1">
  </div>
  <div class="child child-2">
  </div>
  <div class="child child-3">
  </div>
  <div class="child child-4">
  </div>
</div>
...