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

Дата публикации: 2016-07-05

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Поехали!

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

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

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

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

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

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

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

<div class="columns">
  <div class="column main-column">
    2/3 column
  </div>
  <div class="column">
    1/3 column
  </div>
</div>

2/3 column

</div>

1/3 column

</div>

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

Контейнер columns

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

.columns {
  display: flex;
}
 
.column {
  flex: 1;
}
 
.main-column {
  flex: 2;
}

.columns {

display: flex;

}

.column {

flex: 1;

}

.main-column {

flex: 2;

}

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

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

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

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

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

.column {
  display: flex;
  flex-direction: column; /* Makes the articles stacked vertically */
}
 
.article {
  flex: 1; /* Stretches the articles to fill up the remaining space */
}

.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, то статьи будут занимать все вертикальное пространство, сохраняя равную ширину колонок.

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

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

Заголовок

Параграф

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

<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>

</figure>

</h2>

</p>

</footer>

</div>

</a>

.article {
  display: flex;
  flex-direction: column;
  flex-basis: auto; /* задает первоначальный размер элемента в зависимости от контента  */
}
 
.article-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
 
.article-content {
  flex: 1; /* Так контент будет занимать все свободное пространство, сдвигая полоску с информацией об авторе и комментариях вниз */
}

.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.

<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>

</a>

</div>

</a>

</a>

</a>

</div>

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

.nested-column {
  flex: 2;
}

.nested-column {

flex: 2;

}

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

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

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

.first-article {
  flex-direction: row;
}
 
.first-article .article-body {
  flex: 1;
}
 
.first-article .article-image {
  height: 300px;
  order: 2;
  padding-top: 0;
  width: 400px;
}

.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, а вместо него прицепим медиа запрос:

@media screen and (min-width: 800px) {
  .columns,
  .column {
    display: flex;
  }
}

@media screen and (min-width: 800px) {

.columns,

.column {

display: flex;

}

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

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

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

@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;
  }
}

@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.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее