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>

Пожалуйста укажите новичку на явные огрехи, можно ли упростить?
  • Вопрос задан
  • 157 просмотров
Решения вопроса 3
Krasnodar_etc
@Krasnodar_etc
little 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
WebDev
Колонку с контентом ставьте повыше (над side left) к началу кода — сделайте поисковикам приятно, а затем, флекс order-ом поменяйте ее положение на нужное. Гляньте вариант Holy Grail Layout
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
Sveak Барнаул
от 40 000 руб.
15 авг. 2018, в 22:39
60000 руб./за проект
15 авг. 2018, в 22:01
6000 руб./за проект
15 авг. 2018, в 21:18
30000 руб./за проект