Flexbox-3. Flexbox на практике

29.10.2018 | Написав eugenem

В двух предыдущих записях Flexbox-1. Flex-контейнер и его свойства и Flexbox-2. Flex-элемент и его свойства – речь шла о теории, сейчас попробуем применить это всё на практике. И увидим, что flexbox – это действительно круто. Что мы будем делать? Мы создадим html-шаблон сайта, состоящий из шапки, меню, контента, двух боковых колонок и подвала. В общем стандартный такой 3-колоночный макет. При этом контентная часть и колонки должны быть одинаковой высоты, подвал прижат к низу окна браузера (эти два условия при традиционной верстке float’ами решаются через костыли, которые далеко не идеальны).
Итак, приступим.

Накидаем структуру документа:

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>шаблон HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Шапка</header>
<nav>
  <a href="/">Главная</a>
  <a href="#">О нас</a>
  <a href="#">Продукция</a>
  <a href="#">Контакты</a>
</nav>
<main>
    <div class="content">
      <h1>Контент</h1>
      <p>Безусловно, высококачественный прототип будущего проекта позволяет 
      оценить значение экспериментов, поражающих по своей масштабности и грандиозности. 
      Принимая во внимание показатели успешности, понимание сути ресурсосберегающих 
      технологий в значительной степени обусловливает важность своевременного выполнения 
      сверхзадачи.</p>
    </div>
    <aside class="left">Левая колонка</aside>
    <aside class="right">Правая колонка</aside>
</main>
<footer>Подвал</footer>
</body>
</html>

И начнем стилизацию.
Во-первых, назначим собственно сам html flex-контейнером с flex-direction (направление главной оси) – column, а также установим минимальную высоту в 100%.
Во-вторых, для body, именно он будет flex-элементом у html установим значение flex-grow – 1, тем самым мы растянем его на всю высоту окна браузера. Почему высоту, а потому что главная ось у нас – это горизонталь. flex-shrink – 1, и зададим базовую ширину auto.
В-третьих, добавим для наглядности отступы и разный фон для внутренних элементов страницы для наглядности.

* {
  box-sizing: border-box;
}
html {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
 
body {
  flex: 1 1 auto;
}
 
header {
  background: #C2E7F2;
  padding: 20px;
}
 
nav {
  padding: 10px;
  background: #F25652;
}
 
nav a {
  margin: 0 20px;
  color: #fff;
}
 
main {
}
 
.content {
  padding: 20px;
}
 
.left {
  background: #D9BB93;
  padding: 20px;
}
 
.right {
  background: #F1F0E2;
  padding: 20px;
}
 
footer {
  background: #3E4E59;
  color: #fff;
  padding: 20px;
}

Вот что у нас выходит:

See the Pen template-1-0 by molodezky (@molodezky) on CodePen.light

Пока это совсем не то, что нам в итоге нужно. Продолжим.
В технологии flexbox есть одна замечательная вещь flex-элемент сам по себе так же может выступать flex-контейнером, чем мы сейчас и воспользуемся.
Назначим body в свою очередь display – flex с flex-direction – column. В результате header, nav, main и footer станут flex-элементами.
Назначим для header, nav и footer flex-shrink – 0, flex-basis – auto. Т.о. они будут занимать высоту согласно контента в них. Для main же flex-shrink сделаем 1, flex-basis также auto.

* {
  box-sizing: border-box;
}
html {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
 
body {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
 
header {
  background: #C2E7F2;
  padding: 20px;
  flex: 0 auto;
}
 
nav {
  padding: 10px;
  background: #F25652;
  flex: 0 auto;
}
 
nav a {
  margin: 0 20px;
  color: #fff;
}
 
main {
  flex: 1 auto;
}
 
.content {
  padding: 20px;
}
 
.left {
  background: #D9BB93;
  padding: 20px;
}
 
.right {
  background: #F1F0E2;
  padding: 20px;
}
 
footer {
  background: #3E4E59;
  color: #fff;
  padding: 20px;
  flex: 0 auto;
}

В результате всю свободную высоту в документе займет main, прижав footer к низу окна браузера.

See the Pen template-1-1 by molodezky (@molodezky) on CodePen.light

Осталось поработать с контентной частью и боковыми колонками.
Опять же main делаем flex-контенером. Боковым колонкам запрещаем расширяться и сжиматься, указав flex-grow и flex-shrink – 0, и зададим ширину в 240px.
Для content же эти свойства сделаем соответственно 1 и auto, тем самым он будет занимать все оставшееся место.
Высота боковых колонок и контента автоматически при этом станет равной всему промежутку между меню и подвалом, т.к. по умолчанию именно так и ведут себя flex-элементы, у контейнера по умолчанию свойство align-items – stretch.

* {
  box-sizing: border-box;
}
html {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
 
body {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
 
header {
  background: #C2E7F2;
  padding: 20px;
  flex: 0 auto;
}
 
nav {
  padding: 10px;
  flex: 0 auto;
  background: #F25652;
}
 
nav a {
  margin: 0 20px;
  color: #fff;
}
 
main {
  display: -webkit-flex;
  display: flex;
  flex: 1 auto;
}
 
.content {
  flex: 1 auto;
  padding: 20px;
}
 
.left {
  background: #D9BB93;
  padding: 20px;
  flex: 0 0 200px;
}
 
.right {
  background: #F1F0E2;
  padding: 20px;
  flex: 0 0 200px;
}
 
footer {
  background: #3E4E59;
  color: #fff;
  padding: 20px;
  flex: 0 auto;
}

Получаем вот такое отображение документа:

See the Pen template-1-2 by molodezky (@molodezky) on CodePen.light

Теперь нам нужно поставить левую колонку на ее место – левее контента. Делаем это, задав ей order равный -1.
Также flex-контейнером назначим и nav, а flex-элементы в нем – ссылки – поставим по центру блока через свойство justify-content.

* {
  box-sizing: border-box;
}
html {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
 
body {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
 
header {
  background: #C2E7F2;
  padding: 20px;
  flex: 0 auto;
}
 
nav {
  display: -webkit-flex;
  display: flex;
  padding: 10px;
  flex: 0 auto;
  background: #F25652;
  justify-content: center;
}
 
nav a {
  flex: 0 auto;
  margin: 0 20px;
  color: #fff;
}
 
main {
  display: -webkit-flex;
  display: flex;
  flex: 1 auto;
}
 
.content {
  flex: 1 auto;
  padding: 20px;
}
 
.left {
  background: #D9BB93;
  padding: 20px;
  order: -1;
  flex: 0 0 200px;
}
 
.right {
  background: #F1F0E2;
  padding: 20px;
  flex: 0 0 200px;
}
 
footer {
  background: #3E4E59;
  color: #fff;
  padding: 20px;
  flex: 0 auto;
}

Вот теперь почти готово. Почему почти? Нашему макету не хватает полной адаптивности.
Для телефонов и планшетов в портретной ориентации, а точнее до max-width: 767px добавим свои стили, убрав колоночность и выстроив пункты меню один под другим:

@media (max-width: 767px) {
  nav {
    flex-direction: column;
  }
  nav a {
    text-align: center;
    margin: 0;
    padding: 5px 0;
  }
  main {
    flex-direction: column;
  }
  .left {
    order: 0;
    flex:0 0 auto;
  }
  .right {
    flex:0 0 auto;
  }
}

В результате мы получим окончательный вид:

See the Pen template-1 by molodezky (@molodezky) on CodePen.light

Рубрика: Веброзробка

Позначки:CSS, flexbox

Коментарі читачів статті "Flexbox-3. Flexbox на практике"

Немає коментарів.

Залишити відповідь

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.