Могу ли я потянуть предметы в flexbox?

Question

Мне нужно создать следующую структуру:

|           | 
| [item][item][item]   [item][item]| 
|           | 

Есть 5 элементов внутри. Все они выровнены по вертикали к середине. 3 первых элемента тянутся влево и 2 последних элемента тянутся вправо.

Я знаю, что могу использовать для этого поплавки, но у него есть несколько недостатков, в том числе неудобное вертикальное выравнивание.

Я решил использовать flexbox, который оказался намного более удобным и гибким. Кроме того, он более отзывчивый.

Теперь, мой вопрос: могу ли я распространять свои элементы, подобные этому, в flexbox? В идеале каждый из этих 5 элементов был бы элементом flexbox. Но как я могу сказать flexbox, чтобы потянуть эти 3 влево, а те 2 - вправо? Я думаю, что добавление пустого элемента для заполнения пространства - не самая лучшая идея.

Это можно сделать или мне нужно сделать это вот так?

|           | 
| [  item  ]   [ item ]| 
|           | 

Где каждый элемент будет содержать необходимые элементы внутри или, возможно, быть отдельными гибкими ячейками?

Answer 1

Использование display: flex вместе с margin-left: auto для 4-го дочернего элемента

<main> 
    <div>item 1</div> 
    <div>item 2</div> 
    <div>item 3</div> 
    <div>item 4</div> 
    <div>item 5</div> 
</main> 

Css

main { 
    display: flex; 
} 

div { 
    width: 12%; 
    margin: 0 10px; 
    border: 1px red solid; 
} 

div:nth-child(4) { 
    margin-left: auto; 
} 

Codepen: http://codepen.io/anon/pen/wKvMOw

---

Выход:

Answer 2

Или вы можете вставить ж/Flexbox Layout и пусть прогибается проп делать все волшебство. Лично мне не нравится устанавливать поля (кроме margin:0;) в макете гибкой коробки, он может сбросить макет, а также создать нежелательные полосы прокрутки.

<div class="rowNoWrap"> 
    <div class="flexyChild">[ item ]</div> 
    <div class="flexyChild">[ item ]</div> 
    <div class="flexyChild">[ item ]</div> 
    <div class="flexyChild">[ item ]</div> 
    <div class="flexyChild">[ item ]</div> 
</div> 

.rowNoWrap { 
    display: flex; 
    display: -webkit-flex; 
    -webkit-flex-flow: row nowrap; 
    -moz-flex-flow: row nowrap; 
    -ms-flex-flow: row nowrap; 
    -o-flex-flow: row nowrap; 
    flex-flow: row nowrap; 
} 
.flexyChild { 
    flex: 1; 
} 
.flexyChild:nth-child(4) { 
    flex: 5; 
    text-align: right; 
    padding-right: 2%; 
} 

Дает этот макет:

jsFiddle here

Answer 3

Я просто хотел бы добавить еще один способ реализации Flexbox. Без полей, прокладок, границ или специальных селекторов. Я добавил 2 дополнительных элемента, чтобы разделить основной контейнер для гибких дисков (.main) с двумя вложенными гибкими контейнерами (.sub.left и .sub.right).

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font: 400 16px/1.45 Consolas; 
 
    list-style: none; 
 
} 
 
body { 
 
    color: white; 
 
    background: black; 
 
} 
 
.main { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row nowrap; 
 
    flex-flow: row nowrap; 
 
    -webkit-justify-content: space-between; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
    outline: 2px dashed yellow; 
 
} 
 
.node { 
 
    outline: 4px solid red; 
 
    font-size: .9rem; 
 
    text-align: center; 
 
    width: 20%; 
 
} 
 
.sub { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    width: 50%; 
 
    outline: 3px dotted lime; 
 
} 
 
.left { 
 
    -webkit-justify-content: flex-start; 
 
    justify-content: flex-start; 
 
} 
 
.right { 
 
    -webkit-justify-content: flex-end; 
 
    justify-content: flex-end; 
 
} 
 
.msg { 
 
    font-size: .9rem; 
 
    margin-top: 5%; 
 
} 
 
.ylw { 
 
    color: yellow; 
 
} 
 
.grn { 
 
    color: lime; 
 
} 
 
.red { 
 
    color: red; 
 
}

<nav class="main"> 
 
    <ul class="sub left"> 
 
    <li class="node">[ item ]</li> 
 
    <li class="node">[ item ]</li> 
 
    <li class="node">[ item ]</li> 
 
    </ul> 
 
    <ul class="sub right"> 
 
    <li class="node">[ item ]</li> 
 
    <li class="node">[ item ]</li> 
 
    </ul> 
 
</nav> 
 
<p class="msg"><span class="ylw">Yellow</span> = .main 
 
    <br/><span class="grn">Green</span> = .sub 
 
    <br/><span class="red">Red</span> = .node