@voproser

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

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

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

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

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

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

Контейнер без переменных флексбокса, внутри еще один контейнер под новости уже с переменными флексбокса на горизонталь c flex-wrap, потом дивы на сами новости, потом контейнер на сайдбар с переменными на вертикаль, и далее дивы на сайдбары
Т.е: bigcontainer>containernews>news containersidebar>sidebar
  • Вопрос задан
  • 123 просмотра
Решения вопроса 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;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы