Как будет правильнее сделать (flexbox)?

Question

[voproser]

Суть такова, что в будущем собираюсь сверстать шаблон под WP. Нужно сделать так, чтобы новости в контейнере выводились в две колонки и при добавлении так же шли вниз, и рядом был сайдбар чуть меньше размером(!) в том же контейнере, как правильнее сделать?
1 вариант:
Контейнер с переменными флексбокса и три одинаковых дива под новости и сайдбар


2 вариант:
Контейнер с переменными флексбокса, два дива под новости и отдельным дивом под сайдбар


или ваш вариант.

Вроде как второй вариант правильный, но на сайдбар не задаётся размер через flex-basis

Update:
Или третий вариант(додумал его чуть позже :) )

Контейнер без переменных флексбокса, внутри еще один контейнер под новости уже с переменными флексбокса на горизонталь c flex-wrap, потом дивы на сами новости, потом контейнер на сайдбар с переменными на вертикаль, и далее дивы на сайдбары
Т.е: bigcontainer>containernews>news containersidebar>sidebar

Comments

[Вова Дружаев]

один я вижу 2 одинаковые картинки?
А при чем тут вордпресс? Ваш вопрос прямо к верстальщикам. На кодепене таких примеров вагон и еще прицеп.

Answer 1

[Кристина]

Что-то типа такого. https://codepen.io/anon/pen/KxEjxb

<div class="container">
  <section class="news">
    <div class="news__item">Новость</div>
    <div class="news__item">Новость</div>
    <div class="news__item">Новость</div>
    <div class="news__item">Новость</div>
    <div class="news__item">Новость</div>
  </section>
  <aside class="sideBar">Боковое меню</aside>
</div>

.container{
  display: flex;
  max-width: 1200px;
  background: #eee;
  margin: 0 auto;
}

.news{
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  background: lightgreen;
}

.news__item{
  flex-basis: 200px;
  flex-grow: 1;
  height: 300px;
  margin: 10px;
  background: lightblue;
}

.sideBar{
  flex-grow: 1;
  max-width: 400px;
}

Comments

[voproser]

А если еще сделать чтобы новости были фиксированного размера если новость одна в колонке, а каждый сайдбар имел свою колонку?