Как сделать такое выравнивание с Flex

355

24 ноября 2016, 10:09

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

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

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

Answer 1

Судя по этом же вопросу на Toster вам надо было что бы 5тый блок тянулся в том случае если он последний и если их 6 то становились одинаковыми , ну вот совственно реализация

header { 
  width: 100%; 
  height: 100px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  margin-bottom: 3px; 
} 
main { 
  display: flex; 
} 
aside, 
article { 
  border-radius: 4px; 
} 
aside { 
  display: inline-flex; 
  border: 1px solid red; 
  width: 40%; 
} 
article { 
  display: inline-flex; 
  border: 1px solid blue; 
  width: 59%; 
  margin-right: 1%; 
  min-height: 300px; 
  justify-content: initial; 
  align-items: flex-start; 
  flex-wrap: wrap; 
} 
.item { 
  width: 150px; 
  height: 150px; 
  border: 1px solid orange; 
  margin: 10px; 
} 
.item:nth-last-child(5n+1) { 
  /*чётные*/ 
  width: 321px; 
  order: 5; 
} 
.item:nth-child(5n+1) { 
  /*чётные*/ 
  width: 150px; 
  order: ; 
}

<header></header> 
<main> 
  <article> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </article> 
  <aside></aside> 
</main> 
<footer></footer>

Это песочница для эксперимента

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Поведение адаптивного дизайна

Вот песочница https://jsfiddle. net/o82kLqdn/1/ Там есть боди с размером 600рх, в нём контейнер 521рх в котором три блока по 164рх с отступами по 10рх.

358

CSS

Совмещение сетки макета блоком для фона

Не получается совместить резиновый макет с блоком, который будет выступать в роли статичного фона (чистый CSS). То макет сваливается под body, то страница...

310

CSS

Графическое оформление списка

Подскажите по списку с оформлением. Что изменить в коде, чтобы если было больше одной строчки в абзаце не сжимался background для номера? Возможно...

396

CSS

Float li - одинаковый вертикальный отступ вместо наибольшего

Есть ul с такими стилями:.

288