Flex 2 блока максимум. Как сделать?

Question

[▪ ▪]

Использую flex для того чтобы было два блока в один ряд. Проблема в том что мне нужно чтобы в ряду было только два блока не более. Это делается для блога где будут постоянно появляться новости. Можно ли сделать чтобы последующие блоки перемещались вниз? Не могу использовать дополнительные классы чтобы добавить в css order: 1; или какой нибудь float:left, float:right.
Разметка блока идет следующая (потом натяжка кода на wordpress):

<div class="post">
                <div class="image"><img src="img/news2-img-head.jpg" alt=""/></div>
                <div class="text">
                <h1><a href="#">UT TELLUS DOLOR DAPIBUS</a></h1>
                <span class="data">Август 25. 2017</span>
                <p>Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу. Взобравшись на первую вершину курсивных гор</p>				
                <a class="button-blog" href="page1.html">Подробнее</a>
      
                </div>
                <div class="clear"></div>
			</div>

Answer 1

[Mikhail Derkach]

flex-wrap попробуй + align-self или марджины
а order тебе тут не нужен, если ты только не меняешь отображение
+ если не можешь писать классы в css, пропиши в html

Comments

[▪ ▪]

Всё супер! Спасибо, помогло.

[Mikhail Derkach]

Рикко, я бы сделал для поста align-self: center + margin: auto 20%, для родителя flexp-wrap: wrap.
По мере добавления постов, они себя будут "расталкивать", но тут может быть проблема с тем, что все посты будут в центре сразу

можно у родителя задать паддинги, чтобы всегда только 2 поста помещалось.
В общем - надо играть с css, как по мне. Лично я не вижу проблемы в добавлении css, а всякие флоаты и ордеры тебе тут не нужны от слова совсем

[Mikhail Derkach]

Рикко, не за что :) рад был помочь