Я хочу выровнять заголовок по вертикали с первым элементом 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](https://i.stack.imgur.com/4SvvP.png)
(У меня есть решение, но я думаю, что это не очень хорошее решение. Мое решение - разместить копиюконтейнера строки flexbox над существующим контейнером строки flexbox. Я бы просто отредактировал содержимое первого элемента с заголовком, а второй элемент - пустым. Это работает, но, опять же, я думаю, что это не очень хорошее решение)