Во флекс-контейнере есть 3 элемента. Необходимо первые 2 элемента расположить на первой строке, 3-ий элемент на второй строке(и все по центру). Как правильно сделать, чтобы ещё и по высоте корректно отображалось. А то указываю flex-wrap: wrap и верх блока уходит за верхнюю часть экрана без возможности скрола.
display: flex;
justify-content: space-around (или center); - выставляет по центру контейнеры
align-items: flex-start; - ставит их по вертикали сверху вниз
flex-flow: row wrap; - ставит контейнеры в строчку с переходом на следующую, если не хватает места
flex-row: 30px; - это отступы по горизонтали
flex-column: 30px; - это отступы по вертикали
Контейнерам задаём:
width: calc(50% - 15px);
А то что он у вас скрывается за верхнюю часть экрана, думаю у вас этот блок фиксирован по высоте и написано - overflow: hidden;
Для решения такой проблемы необходимо использовать свойство align-items в флекс-контейнере.
Для расположения элементов в центре необходимо применить значение align-items: center. Также для корректного переноса элементов на вторую строку необходимо добавить свойство flex-wrap: wrap.
В итоге получим следующую разметку:
<div class="flex-container">
<div>Элемент 1</div>
<div>Элемент 2</div>
<div>Элемент 3</div>
</div>
.flex-container {
display: flex;
align-items: center;
flex-wrap: wrap;
}