Макет Flex

Макет полностью построен свойствами CSS Flex. Цель этой статьи, провести эксперимент насколько хорошо свойства CSS3 Flex работают с тегами HTML5.

Оглавление:
  1. Шапка страницы
  2. Меню страницы
  3. Содержание страницы
  4. Подвал страницы
  5. Медиа запросы

Сначала напишем свойства CSS для тела документа.

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

Шапка страницы

Внутри тега header три блока.

  1. Изображение (img логотип)
  2. Заголовок (h1)
  3. Поиск (form)
<header>
  <figure>
    <img src="logo.png" width="50" height="50" alt=""/>
  </figure>
    <h1>Макет Flex</h1>
  <form action="/" method="GET">
   <div>
    <input type="search" name="search" />
    <button type="submit"></button>
   </div>
  </form>
</header>
header {
    display: flex;
    align-items: center;
    text-align: center;
}
header h1 {
    flex: auto;
}
header form {
    flex-basis: 16%;
}
header form > * {
    flex-wrap: nowrap;
}
header input {
    flex: 0 0 160px;
}
header button {
    background: teal;
    color: white;
}
header button::before {
    content: '\1F50D';
    font-size: 1.5em;
}
  • align-items для горизонтального выравнивания блоков внутри контейнера header. Высота контейнера header зависит от высоты изображения.
  • flex получает всю оставшеюся ширину между блоками.
  • flex-basis ширина последнего блока 16% от всей ширины контейнера header.
  • flex-wrap для всех прямых дочерних элементов формы поиска. Кнопка для формы прилипнет к полю ввода значением nowrap. Ширина поля ввода 160px.
к меню ↑

Меню страницы

Горизонтальное меню CSS Flex с ссылками по центру.

<nav>
  <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    <li><a href="#">Ссылка 3</a></li>
    <li><a href="#">Ссылка 4</a></li>
    <li><a href="#">Ссылка 5</a></li>
  </ul>
</nav>
nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    text-align: center;
}
nav li {
    list-style: none;
    flex-basis: 16.667%;
    max-width: 16.667%;
}
nav ul a {
    display: block;
    padding: 15px 0;
    text-transform: uppercase;
    transition: background .3s ease;
    color: black;
}
  • justify-content и свойство text-align выравнивают ссылки маркированного списка меню по центру.
  • flex-basis и свойство max-width применяется для ширины пунктов списка меню.
к меню ↑

Содержание страницы

Главное содержание страницы состоит из двух колонок. Первая колонка для наполнения, вторая колонка для примера содержит форму подписки.

<main>
  <article>
    <h2>Заголовок</h2>
    <p>Текст</p>
  </article>
  <aside>
    <h3>Заголовок</h3>
  <fieldset>
    <legend>Подписаться</legend>
   <form>
     <div>
       <label for="name">Имя:</label>
       <input id="name" name="name" type="text">
     </div>
     <div>
       <label for="email">Email:</label>
       <input id="email" name="email" type="email">
     </div>
    </form>
   </fieldset>
  </aside>
</main>
main {
    display: flex;
    flex-grow: 1;
    background: white;
}
main > article {
    flex: 1;
}
main > aside {
    flex: 0 0 23%;
}
form {
    display: flex;
    flex-wrap: wrap;
}
form > * {
    align-items: center;
    display: flex;
    flex: 1 0 320px;
    flex-wrap: wrap;
    max-width: 100%;
    margin: .7em auto;
}
label {
    flex: 1 0 90px;
}
input {
    flex: 1 1 230px;
    width: 100%;
}
  • flex-grow заполняет свободное пространство основному содержанию main, для того чтобы подвал страницы прилип к дну страницы.
  • flex указывает ширину 1 для тега article. Тег aside в контейнере main с шириной 23%.

Поведение для дочернего элемента div внутри блока form определяется свойствами:

  • align-items горизонтальное выравнивание текста.
  • flex общий размер элемента div.
  • flex-wrap открепить все элементы друг от друга, чтобы при изменении размера контейнера занимали новое положение.

Для элементов label и input размер указан свойством flex.

к меню ↑

Подвал страницы

В нижнем колонтитуле, как и в верхнем для примера три блока. Поэтому слили для шапки и подвала будут одинаковые.

<footer>
  <h4>Макет CSS Флекс</h4>

   <small>
    2016 © <a href="http://htmlhook.ru">htmlhook.ru</a>
  </small>

  <address>
    <a href="mailto:flex@example.com">Обратная связь</a>
  </address>
</footer>

CSS

footer {justify-content: space-around;}

justify-content применяется для блоков внутри контейнера footer. Значение space-around равномерно заполнит свободное пространство.

к меню ↑

Медиа запросы

Медиа запрос для макета CSS Flex только один. Свойство flex-flow со значением column указывает контейнерам новое положение. Все контейнеры будут расположены горизонтально, если область просмотра страницы меньше чем 900px.

@media screen and (max-width: 900px) {
  main, header, footer {
      flex-flow: column;
  }
}

Полностью макет с оформлением и префиксами для браузеров смотрите на странице CSS Flex.