Как мне добиться этого во Flexbox?(выравнивание по вертикали с элементом flexbox) - PullRequest
0 голосов
/ 05 октября 2018

Я хочу выровнять заголовок по вертикали с первым элементом flexbox (черный ящик внутри красного поля) в контейнере flexbox (красное поле) (см. Изображение).

Некоторая справочная информация: основа гибкости черных ящиков составляет 400 пикселей, и они не растут (flex-grow: 0).Как видите, гибкие элементы расположены горизонтально по центру в контейнере flexbox.Flex-элементы переносятся.

Итак, я хочу, чтобы мой заголовок всегда был выровнен по первому элементу flexbox в контейнере flexbox.Если элементы обертываются, то заголовок должен быть выровнен.Интересно, есть ли простое решение flexbox для этого.Вот мой код:

<div class="wrapper">
 <div class="heading"> some heading</div>
 <div class="flexrow">
  <div class="flexitem"></div>
  <div class="flexitem"></div>
 </div>
</div>
-------------------------------
.wrapper {
 width: 75%;
 margin: 0 auto;
}

.flexrow {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}

.flexitem {
  flex-basis:400px;
  flex-grow: 0;
}

enter image description here

(У меня есть решение, но я думаю, что это не очень хорошее решение. Мое решение - разместить копиюконтейнера строки flexbox над существующим контейнером строки flexbox. Я бы просто отредактировал содержимое первого элемента с заголовком, а второй элемент - пустым. Это работает, но, опять же, я думаю, что это не очень хорошее решение)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...