@crazyRUSS

Как грамотнее делать такой лейаут на Flexbox?

https://codepen.io/anon/pen/KZEMvQ

Знаю, что можно сделать и без дополнительного контейнера для колонок. Тут скорее вопрос, это нормальная практика или лучше пытаться делать все в одном контейнере с flex-wrap: wrap?
  • Вопрос задан
  • 158 просмотров
Решения вопроса 1
  • rockon404
    @rockon404
    Frontend Developer
    Лучше сделайте по аналогии с Bootstrap. Разделите сущности по обязанностям, разделите свой container на container и row.
    container ограничивает width и имеет margin: 0 auto; .
    row это flex контейнер для col. И все правильно, свойстово flex-wrap: wrap. Но тогда у колонок помимо flex: 0 0 {value}%;, определите max-width: {value}%;, чтобы сетка не сыпалась.

    В текущем варианте, ваша верстка не гибкая, так как контейнер не используешь без flex и как его сетку не используешь без ограничения ширины.

    Примерно так:
    .cotainer {
      width: $my-width-value;
      width: 100%;
      margin: 0 auto;
      padding-right: 15px;
      padding-left: 15px;
    }
    
    .row {
      display: flex;
      flex-wrap: wrap;
      margin-left: -15px;
      margin-right: -15px;
    }
    
    .col {
      flex: 0 0 $col-width:
      max-width: $col-width:
      padding-right: 15px;
      padding-left: 15px;
    }
    Ответ написан
Пригласить эксперта
Ответы на вопрос 1
  • @GitJedi
    А зачем тебе все в общем контейнере. Я бы убрал хедер и футер из контейнера и не давал бы ему flex-direction: column. По умолчанию они и так на 100% буду. Опять же если тебе нужен просто центрирующий контейнер но ни к чему ему display-flex задавать. Центральный контейнер - гуд. При адаптиве можно сделать flex-direction: column Да и все.
    Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы