Как выровнять элементы flexbox, как на картинке?

Question

[Юра Юриевич]

Добрый день! учусь использовать Flexbox, вот решил сделать такой макет, и не могу понять, как выровнять элементы по левой стороне, как на первой кратинке. На деле же, заполняет всё пустое место пространством, а не давая ровный отступ и выравниая по левой стороне.

Примерно такая структура:

<div>    //display: flex
    <ul>   //display: flex, justify-content: space-between; flex-wrap; wrap;
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Но justify-content, выравнивает как на 2й картинке, а мне хотелось бы, как на 1й, это возможно? Спасибо!

Answer 1

[Сергей delphinpro]

вот одно решение https://jsfiddle.net/DelphinPRO/hm3ewt1d/
есть второе, писал фиддл сюда на тостер, но не нашел. Вкратце суть: делаем justify-content, добавляем два псевдоэлемента для родителя высотой 1px и шириной, равной ширине остальных блоков. order выставляем для них больше чем у блоков.

Comments

[Юра Юриевич]

спасибо, почти то, только без медиа запросов никак?

Answer 2

[Сергей Горячев]

Лично на мой взгляд, такое выравнивание симпатичнее смотрится, и адаптивруется намного проще.

Comments

[Юра Юриевич]

там будет галлерея, сначало идёт n папок, потом идёт n изображений, и вот это будет не красиво, в таком виде.

[Сергей Горячев]

Юра Юриевич: А по-моему как раз то, что надо)

[Сергей Горячев]

Юра Юриевич: Но если вам прям критично, то без медиа-запросов и дополнительного враппера не обойдетесь.

[Юра Юриевич]

Sergey Goryachev: Спасибо, я уже и так понимаю, что без медиа никак...

[Сергей Горячев]

Юра Юриевич: https://jsfiddle.net/webirus/ywx51dew/ width: 33.333333%; меняйте на медиа запросах, и все получится)

[pashted]

так может нужен обыкновенный display:inline-block?

Answer 3

[xtala zen]

https://jsfiddle.net/3034a5bw/ все остальное тривиально.