Верстка адаптивной сетки новостей на Flexbox

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

Причина использования Flexbox в том, что он предоставляет очень мощные функции:

  • Простое создание адаптивных колонок
  • Создание колонок одной высоты
  • Перемещение контента в нижний контейнер

Шаг 1. Начнем с двух колонок

Создание колонок в CSS всегда было не простой задачей. В течение долгого времени, единственным вариантом было использовать плавающие элементы (float) или таблицы, но оба варианта имели свои недостатки.

Flexbox дает нам:

  • Чистый код: нам понадобится всего лишь один контейнер display: flex
  • Нет необходимости отменять обтекание элементов (clear: both), предотвращая некорректную работу макета
  • Семантическая разметка
  • Гибкость: мы можем изменить размер, растянуть, выровнять столбцы в несколько строк 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>

Здесь представлены два элемента:

  • Контейнер columns
  • Два дочерних контейнера column, один из которых имеет дополнительный класс main-column, который мы будем использовать для увеличения ширины контейнера.
.columns {
  display: flex;
}
 
.column {
  flex: 1;
}
 
.main-column {
  flex: 2;
}

Основной контейнер с классом main-column имеет свойство flex: 2, благодаря этому он будет занимать в два раза больше места чем другая колонка.

Добавив некоторые дополнительные визуальные стили, у нас появится следующий результат:

See the Pen How to Build a News Website Layout with Flexbox i by Envato Tuts+ (@tutsplus) on CodePen.

Шаг 2. Делаем колонки Flexbox контейнерами

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

  • Вертикальное отображение статей
  • Статьи растягивались и заполняли свободное пространство
.column {
  display: flex;
  flex-direction: column; /* Вертикальное отображение статей */
}
 
.article {
  flex: 1; /* Растягивание и заполнение свободного пространства */
}

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

See the Pen How to Build a News Website Layout with Flexbox ii by Envato Tuts+ (@tutsplus) on CodePen.

Шаг 3. Делаем все статьи Flexbox контейнерами

Для дополнительного контроля, сделаем каждую статью Flexbox контейнером, который будет иметь:

  • Заголовок
  • Параграф
  • Информацию о авторе и количестве комментариев
  • Опциональное адаптивное изображение

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

flexbox card

<a class="article first-article">
  <figure class="article-image">
    <img src="/">
  </figure>
  <div class="article-body">
    <h2 class="article-title">
      <!-- title -->
    </h2>
    <p class="article-content">
      <!-- content -->
    </p>
    <footer class="article-info">
      <!-- information -->
    </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; /* Позволяет заполнить оставшееся пространство контентом, и таким образом сдвинуть информационную панель в нижнюю часть */
}

Элементы статьи, расположены вертикально благодаря правилу flex-direction: column;.

Мы добавили flex: 1 для элемента article-content, для того чтобы он заполнял пустое пространство и сталкивал информационную панель в нижнюю часть, независимо от высоты колонки.

See the Pen How to Build a News Website Layout with Flexbox iii by Envato Tuts+ (@tutsplus) on CodePen.

Шаг 4. Добавление вложенных столбцов

Левую, большую колонку разобьем еще на две колонки, в которых будут находится статьи. Для этого добавим класс nasted-column для родительской колонки:

<div class="columns">
  <div class="column nested-column">
    <a class="article">
      <!-- Article content -->
    </a>
  </div>
 
  <div class="column">
    <a class="article">
      <!-- Article content -->
    </a>
    <a class="article">
      <!-- Article content -->
    </a>
    <a class="article">
      <!-- Article content -->
    </a>
  </div>
</div>
.nested-column {
  flex: 2;
}

See the Pen How to Build a News Website Layout with Flexbox iv by Envato Tuts+ (@tutsplus) on CodePen.

Шаг 5. Отображаем первую статью в горизонтальном виде

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

.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 элементов, не затрагивая HTML-разметку.

See the Pen How to Build a News Website Layout with Flexbox v by Envato Tuts+ (@tutsplus) on CodePen.

Шаг 6. Делаем макет адаптивным

Мы добились желаемого результата, но наш макет выглядит немного сплющенным, давайте исправим это с помощью медиа запросов.

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

Вы можете просто вызвать "адаптивный" макет, запуская Flexbox только выше заданной точки.

Мы удалим свойство display: flex у селекторов .columns и .column, и добавим его внутри медиа запроса:

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

На небольших экранах все статьи будут находится друг под другом, а на большом экране будут располагаться в две колонки

Шаг 7. Финальные штрихи

Для того, чтобы сделать макет более привлекательным на больших экранах, давайте добавим некоторые 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;
  }
}

Первая статья и её содержание располагаются горизонтально, с текстом слева и изображением справа. Кроме того, основной столбец стал шире (75%) и вложенная колонка (66%). Ниже представлен конечный результат!

See the Pen How to Build a News Website Layout with Flexbox by Envato Tuts+ (@tutsplus) on CodePen.

Перевод статьи How to Build a News Website Layout with Flexbox

Тэги: flexboxfrontend

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.