Как создать макет новостного сайта на Flexbox

Как создать макет новостного сайта на Flexbox

От автора: в этой статье вам не нужно знать все тонкости Flexbox, чтобы приступить к созданию макета новостного сайта. В процессе создания новостного сайта мы узнаем про несколько функций Flexbox, которые можно встретить на сайте Guardian.

Мы используем Flexbox, потому что это очень мощный инструмент:

В нем можно запросто создавать адаптивные колонки

Колонки можно делать одинаковой высоты

Контент в контейнере можно прижимать к нижней границе

Поехали!

Начнем с двух колонок

Колонки в CSS всегда вызывали ряд трудностей. Очень долгое время нам приходилось работать либо с обтеканиями, либо с таблицами, однако у обоих вариантов есть свои недостатки. Flexbox же облегчает процесс создания колонок, и мы получаем:

Чистый код: нужно добавить всего один контейнер со свойством display: flex

Не нужно сбрасывать обтекания, чтобы не возникло непредвиденных проблем с макетом

Семантическая разметка

Гибкость: парой строк CSS мы можем менять размер, растягивать, выравнивать колонки и т.д.

Начнем с создания двух колонок; Первая будет занимать 2/3 ширины контейнера, а вторая 1/3.

Нам понадобятся два элемента:

Контейнер columns

Дочерние элементы column. У одного будет дополнительны класс main-column, который мы будем использовать для расширения колонки

Главной колонке задано flex значение 2, колонка будет занимать в 2 раза больше места, чем остальные. Добавив немного стилей, мы получим вот это:

Сделаем колонки флекс контейнерами

В колонках будут идти статьи, расположенные одна под другой, поэтому нам нужно наши колонки column преобразовать во флекс контейнеры. Нам нужно, чтобы:

Статьи располагались вертикально

Статьи растягивались и заполняли все свободное пространство

Если контейнеру задать свойство flex-direction: column, а у дочерних элементов прописать flex: 1, то статьи будут занимать все вертикальное пространство, сохраняя равную ширину колонок.

Преобразуем каждую статьи во флекс контейнер

Сделаем наш код еще более гибким, давайте преобразуем статьи во флекс контейнеры. В каждой статье будет:

Заголовок

Параграф

Панель с информацией об авторе и количестве комментариев

Опциональное адаптивное изображение

В статьях нам нужен Flexbox для того, чтобы прижать полоску с мета данными к нижней части блока. Вот такой макет статьи мы сегодня создадим:

Благодаря свойству flex-direction: column, статьи располагаются в вертикальном положении. К элементу article-content применяется свойство flex: 1, из-за чего заполняется пустое пространство, сдвигая article-info к нижней части блока. Высота колонки не имеет значения.

Добавим несколько вложенных колонок

Слева нам необходимо добавить несколько колонок. Поэтому необходимо заменить вторую статью на такой же контейнер columns.

Первая вложенная колонка должна быть шире остальных, поэтому необходимо ей задать свойство nested-column и дополнительные стили:

Первая колонка стала шире других в два раза.

Меняем макет первой статьи на горизонтальный

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

Тут есть очень важное свойство order, с помощью которого можно менять порядок HTML элементов без изменения разметки. На самом деле article-image в разметке идет перед article-body, но показываться он будет, как будто он находится после.

Добавляем адаптивность

Все выглядит ровно так, как мы и хотели, только слегка сплющено. Пофиксим это, добавив адаптивность. Замечательная особенность Flexbox в том, что для его полного отключения необходимо всего-лишь удалить свойство display: flex у контейнера, а все остальные флексбокс свойства продолжат правильно работать (align-items или flex).

То есть, включать адаптивность можно, активируя Flexbox только после заданного разрешения экрана. Мы удалим свойство display: flex у элементов .columns и .column, а вместо него прицепим медиа запрос:

Вот и все! На маленьких экранах статьи будут идти одна под другой. На экранах 800px и больше статьи будут идти в две колонки.

Последние штрихи

Чтобы макет лучше смотрелся на больших экранах, давайте добавим немного CSS стилей:

В первой статье контент расположен горизонтально: текст по левую сторону, изображение справа. Основная колонка теперь шире (75%) и содержит в себе еще две колонки (66%). Конечный результат!

Заключение

Надеюсь, я наглядно показал вам, что для работы с Flexbox не нужно знать все аспекты и тонкости! Созданный нами адаптивный новостной макет пригодится вам: разберите его на части, поиграйтесь с кодом. Пишите в комментариях, что у вас получилось!

Редакция: Jeremy Thomas

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: