SuperToster
@SuperToster

Вариант flexbox макета, извращение или «норм»?

Всем привет!

Есть макет jsfiddle.net/96zfsobp/
- Хэдер (высота известна)
- Три колонки (левая и правая фиксированной ширины, центральная резиновая)
- Футер (высота известна, липкий футер)

Для того, чтобы облегчить будущий адаптив, хочется использовать простую структуру блоков:

<div class="row">
  <div class="col">
    header
  </div>
  <div class="col">
    side left
  </div>
  <div class="col">
    content
  </div>
  <div class="col">
    side right
  </div>
  <div class="col">
    footer
  </div>
</div>

Пожалуйста укажите новичку на явные огрехи, можно ли упростить?
  • Вопрос задан
  • 170 просмотров
Решения вопроса 3
Krasnodar_etc
@Krasnodar_etc
avito front
Можно, конечно - header и footer обычно располагаются прям в body
(тэги header, section, footer, ... появились в HTML5, погугли)
<header>
    header
</header>
<section class="row">
    <div class="col col-left"></div>
    <div class="col"></div>
    <div class="col col-right"></div>
</section>
<footer>
    footer
</footer>
Ответ написан
ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer
Псевдоклассы
flex-wrap: wrap;
col:first-of-type, col:last-of-type{
это хэдер и футер
width: 100%
}
col:nth-of-type(2), col:nth-of-type(4){
width: указываем в процентах
}
col:nth-of-type(3){
контент
mn-witdh: хиксируем
}

Ну я бы просто разные классы им дал на самом деле
Ответ написан
Комментировать
Odisseya
@Odisseya
Оптимизирую PageSpeed & Performance
Колонку с контентом ставьте повыше (над side left) к началу кода — сделайте поисковикам приятно, а затем, флекс order-ом поменяйте ее положение на нужное. Гляньте вариант Holy Grail Layout
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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