От автора: в этой статье вам не нужно знать все тонкости Flexbox, чтобы приступить к созданию макета новостного сайта. В процессе создания новостного сайта мы узнаем про несколько функций Flexbox, которые можно встретить на сайте Guardian.
Мы используем Flexbox, потому что это очень мощный инструмент:
В нем можно запросто создавать адаптивные колонки
Колонки можно делать одинаковой высоты
Контент в контейнере можно прижимать к нижней границе
Поехали!
Начнем с двух колонок
Колонки в CSS всегда вызывали ряд трудностей. Очень долгое время нам приходилось работать либо с обтеканиями, либо с таблицами, однако у обоих вариантов есть свои недостатки. Flexbox же облегчает процесс создания колонок, и мы получаем:
Чистый код: нужно добавить всего один контейнер со свойством display: flex
Не нужно сбрасывать обтекания, чтобы не возникло непредвиденных проблем с макетом
Семантическая разметка
Гибкость: парой строк CSS мы можем менять размер, растягивать, выравнивать колонки и т.д.
Начнем с создания двух колонок; Первая будет занимать 2/3 ширины контейнера, а вторая 1/3.
1 2 3 4 5 6 7 8 |
<div class="columns"> <div class="column main-column"> 2/3 column </div> <div class="column"> 1/3 column </div> </div> |
Нам понадобятся два элемента:
Контейнер columns
Дочерние элементы column. У одного будет дополнительны класс main-column, который мы будем использовать для расширения колонки
1 2 3 4 5 6 7 8 9 10 11 |
.columns { display: flex; } .column { flex: 1; } .main-column { flex: 2; } |
Главной колонке задано flex значение 2, колонка будет занимать в 2 раза больше места, чем остальные. Добавив немного стилей, мы получим вот это:
Сделаем колонки флекс контейнерами
В колонках будут идти статьи, расположенные одна под другой, поэтому нам нужно наши колонки column преобразовать во флекс контейнеры. Нам нужно, чтобы:
Статьи располагались вертикально
Статьи растягивались и заполняли все свободное пространство
1 2 3 4 5 6 7 8 |
.column { display: flex; flex-direction: column; /* Makes the articles stacked vertically */ } .article { flex: 1; /* Stretches the articles to fill up the remaining space */ } |
Если контейнеру задать свойство flex-direction: column, а у дочерних элементов прописать flex: 1, то статьи будут занимать все вертикальное пространство, сохраняя равную ширину колонок.
Преобразуем каждую статьи во флекс контейнер
Сделаем наш код еще более гибким, давайте преобразуем статьи во флекс контейнеры. В каждой статье будет:
Заголовок
Параграф
Панель с информацией об авторе и количестве комментариев
Опциональное адаптивное изображение
В статьях нам нужен Flexbox для того, чтобы прижать полоску с мета данными к нижней части блока. Вот такой макет статьи мы сегодня создадим:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<a class="article first-article"> <figure class="article-image"> <img src=""> </figure> <div class="article-body"> <h2 class="article-title"> <!-- заголовок --> </h2> <p class="article-content"> <!-- контент --> </p> <footer class="article-info"> <!-- информация --> </footer> </div> </a> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.article { display: flex; flex-direction: column; flex-basis: auto; /* задает первоначальный размер элемента в зависимости от контента */ } .article-body { display: flex; flex: 1; flex-direction: column; } .article-content { flex: 1; /* Так контент будет занимать все свободное пространство, сдвигая полоску с информацией об авторе и комментариях вниз */ } |
Благодаря свойству flex-direction: column, статьи располагаются в вертикальном положении. К элементу article-content применяется свойство flex: 1, из-за чего заполняется пустое пространство, сдвигая article-info к нижней части блока. Высота колонки не имеет значения.
Добавим несколько вложенных колонок
Слева нам необходимо добавить несколько колонок. Поэтому необходимо заменить вторую статью на такой же контейнер columns.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="columns"> <div class="column nested-column"> <a class="article"> <!-- Статья --> </a> </div> <div class="column"> <a class="article"> <!-- Статья --> </a> <a class="article"> <!-- Статья --> </a> <a class="article"> <!-- Статья --> </a> </div> </div> |
Первая вложенная колонка должна быть шире остальных, поэтому необходимо ей задать свойство nested-column и дополнительные стили:
1 2 3 |
.nested-column { flex: 2; } |
Первая колонка стала шире других в два раза.
Меняем макет первой статьи на горизонтальный
Первая статья у нас очень большая. Дабы оптимизировать место, давайте изменим ее макет на горизонтальный.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.first-article { flex-direction: row; } .first-article .article-body { flex: 1; } .first-article .article-image { height: 300px; order: 2; padding-top: 0; width: 400px; } |
Тут есть очень важное свойство order, с помощью которого можно менять порядок HTML элементов без изменения разметки. На самом деле article-image в разметке идет перед article-body, но показываться он будет, как будто он находится после.
Добавляем адаптивность
Все выглядит ровно так, как мы и хотели, только слегка сплющено. Пофиксим это, добавив адаптивность. Замечательная особенность Flexbox в том, что для его полного отключения необходимо всего-лишь удалить свойство display: flex у контейнера, а все остальные флексбокс свойства продолжат правильно работать (align-items или flex).
То есть, включать адаптивность можно, активируя Flexbox только после заданного разрешения экрана. Мы удалим свойство display: flex у элементов .columns и .column, а вместо него прицепим медиа запрос:
1 2 3 4 5 6 |
@media screen and (min-width: 800px) { .columns, .column { display: flex; } } |
Вот и все! На маленьких экранах статьи будут идти одна под другой. На экранах 800px и больше статьи будут идти в две колонки.
Последние штрихи
Чтобы макет лучше смотрелся на больших экранах, давайте добавим немного CSS стилей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@media screen and (min-width: 1000px) { .first-article { flex-direction: row; } .first-article .article-body { flex: 1; } .first-article .article-image { height: 300px; order: 2; padding-top: 0; width: 400px; } .main-column { flex: 3; } .nested-column { flex: 2; } } |
В первой статье контент расположен горизонтально: текст по левую сторону, изображение справа. Основная колонка теперь шире (75%) и содержит в себе еще две колонки (66%). Конечный результат!
Заключение
Надеюсь, я наглядно показал вам, что для работы с Flexbox не нужно знать все аспекты и тонкости! Созданный нами адаптивный новостной макет пригодится вам: разберите его на части, поиграйтесь с кодом. Пишите в комментариях, что у вас получилось!
Редакция: Jeremy Thomas
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.