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

Question

[SuperToster]

Всем привет!

Есть макет 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>

Пожалуйста укажите новичку на явные огрехи, можно ли упростить?

Answer 1

[Егор Живагин]

Можно, конечно - 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>

Comments

[SuperToster]

Разметка условная, блок с классом .row можно убрать и вместо него повесить эти стили на body. https://jsfiddle.net/96zfsobp/4/

[Егор Живагин]

SuperToster, суть в выделении трёх частей: хедер, основная страница, футер. А вот основную уже делить на left-center-right

Answer 2

[Никита Кит]

Псевдоклассы

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: хиксируем
}

Ну я бы просто разные классы им дал на самом деле

Answer 3

[Odisseya]

Колонку с контентом ставьте повыше (над side left) к началу кода — сделайте поисковикам приятно, а затем, флекс order-ом поменяйте ее положение на нужное. Гляньте вариант Holy Grail Layout