Пример верстки на flexbox

Ноябрь 18, 2012 ||  css , layout ||  комментарии

До использования флексбокс модели еще далеко но интересно попробовать как она решает типовые проблемы.

Работает только в Хроме (февраль 2013).

пример

Теперь все фрагменты по очереди.

Компоновка

<div class='page'>
    <header></header>
    <nav></nav>
    <div class='main'></div>
    <footer></footer>
</div>
.page {
    width: 976px;
    min-height: 100%;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
header {
    flex: 0 0 100px;
}
footer {
    flex: 0 0 100px;
}
.main {
    flex: 1 0 auto;
}

Стили которые не имеют отношения к делу, опускаю. Префиксы тоже.

flex-direction: column; – задается направление “выкладывания” колонок, сверху вниз.
flex: 0 0 100px; – Шапка и футер фиксированные, не растягиваются и не сжимаются.
flex: 1 0 auto; – Контент займет все место которое осталось.

Элемент nav по умолчанию становится флекс-боксом, и дефолтное значение – flex: 0 0 100px;.

Навигация

nav ul {
    display: flex;
    justify-content: flex-start;
}
nav li {
    flex: 1 0 auto;
}

Получаем “табличную” компоновку, каждый пункт меню растягивается и суммарно они заполняют всю ширину.

Боковая панель

<aside>
    <h4>sidebar</h4>
    <div class='sidebar-block'>
        …
    </div>
    <div class='sidebar-block'>
        …
    </div>
    <div class='sidebar-block'>
        …
    </div>
    <div class='sidebar-block'>
        …
    </div>
</aside>
aside {
    display: flex;
    flex-direction: column;
}
.sidebar-block {
    flex: 1 0 auto;
}

Блоки в сайдбаре растягиваются по всей высоте сайдбара. Обалдеть.

Колонки в контенте

<div class='grid'>
    <div class='grid-col'>
        …
    </div>
    <div class='grid-col'>
        …
    </div>
    <div class='grid-col'>
        …
    </div>
</div>
.grid {
    display: flex;
    flex-flow: row nowrap;
}
.grid>.grid-col {
    flex: 1 0 0;
}

Попробуйте для колонки flex: 1 0 auto; :)

Галерея

Мне сьела мозг подобная задача когда нужно выстроить блоки которые сами перетекают на новую строку и при этом внутри строки блоки имеют равную высоту. Ну да, javascript. Но с флексбоксом это же счастье.

HTML код не привожу, все очевидно.

.gallery {
    display: flex;
    flex-flow: row wrap;
}
    .gallery-item {
    flex: 0 0 210px;
}

flex-flow: row wrap , wrap здесь говорит о том что блоки могут падать на новую строку.

Галерея

Форма

Каждая строка формы сверстана списком:

<ul class="field">
    <li class="field-name">
    <label>City</label>
</li>
<li class="field-value">
    <select>
        <option>Kyiv</option>
        <option>Moscow</option>
    </select>
</li>
<li class="field-name">
    <label>zip</label>
</li>
<li class="field-value field-value_small">
    <input type="text">
</li>
</ul>
.field {
    display: flex;
}
.field .field-name:first-child {
    flex: 0 0 160px;
}
.field .field-name {
    flex: 1 1 auto;
}
.field .field-value {
    flex: 5 0 auto;
}
.field .field-value_small {
    flex: 1 0 40px;
}

Первый элемент в строке фиксированный, flex: 0 0 160px; , чтобы получить первую колонку одинаковую для всех строк.

flex: 5 0 auto; – элементы с инпутами, значение 5 здесь означает что они должны занимать больше места чем наименования поля, как в случае zip.

Для полей который должны быть поменьше – field-value_small { flex: 1 0 40px;}. Можно было бы контролировать размер инпута атрибутом size в html, но это не самый простой путь.

Еще раз финальный пример –

пример

Где работает:

По теме:

comments powered by Disqus