CSS Div под Div

Question

У меня возникли проблемы с настройкой div, чтобы появиться под другим div (как и обычно).

I'musing MaterializeCSS. Моя раскладка выглядит следующим образом:

<div class="container valign-wrapper"> 
    <div class="customClass"></div> 
    <div class="customClass"></div> 
</div> 

И CSS:

.valign-wrapper{ 
    display: flex; 
    align-items: center; 
} 

.customClass{ 
    margin: 0 auto; 
    /* text and font css */ 
} 

Однако даже добавление width:100% или изменение класса дисплей не будет делать две дивы появляются вертикально, они появляются бок о бок. Я узнал, что удаление valign-wrapper будет работать, но мои предметы, очевидно, появятся в верхней части сайта ...

Если кто-то столкнулся с той же проблемой, я был бы признателен за помощь!

Answer 1

Вы должны добавить гибкое направление:

.valign-wrapper { flex-direction: column; } 

Таким образом, гибкие элементы расположены в виде столбца. С другой стороны, если вам нужно пойти с flex-direction: row; (по умолчанию), вы можете использовать

.valign-wrapper { flex-wrap: wrap; } 
.customClass { flex-basis: 100%; } 

по-прежнему поддерживать стиль строки, но ваши два элемента завернуть и в конечном счете расположены друг над другом.

Несмотря на то пост с 2013 года, он до сих пор учит магии Flexbox хорошим способом, и я могу просто рекомендую всем прочитать об этом: https://css-tricks.com/snippets/css/a-guide-to-flexbox/