Перейти к содержанию

Макет страницы на Flexbox

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

Для этого определим следующую веб-страницу:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Flexbox в CSS3</title>
    <style>
      * {
        box-sizing: border-box;
      }
      html,
      body {
        padding: 0;
        margin: 0;
        font-family: verdana, arial, sans-serif;
      }

      body {
        color: #fff;
        font-size: 1.1em;
        padding: 1em;
        display: flex;
        flex-direction: column;
      }

      main {
        display: flex;
        flex-direction: column;
      }

      article {
        background-color: #546e7a;
        flex: 2 2 12em;
        padding: 1em;
      }

      nav,
      aside {
        flex: 1;
        background-color: #455a64;
      }

      nav {
        order: -1;
      }

      header,
      footer {
        flex: 0 0 5em;
        background-color: #37474f;
      }

      @media screen and (min-width: 600px) {
        body {
          min-height: 100vh;
        }
        main {
          flex-direction: row;
          min-height: 100%;
          flex: 1 1 auto;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <p>Header</p>
    </header>
    <main>
      <article>
        <h1>Что такое Lorem Ipsum?</h1>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый
          в печати и вэб-дизайне. Lorem Ipsum является
          стандартной "рыбой" для текстов на латинице с
          начала XVI века. В то время некий безымянный
          печатник создал большую коллекцию размеров и форм
          шрифтов, используя Lorem Ipsum для распечатки
          образцов. Lorem Ipsum не только успешно пережил
          без заметных изменений пять веков, но и перешагнул
          в электронный дизайн. Его популяризации в новое
          время
        </p>
      </article>
      <nav>
        <p>Navigation</p>
      </nav>
      <aside>
        <p>Sidebar</p>
      </aside>
    </main>
    <footer>
      <p>Footer</p>
    </footer>
  </body>
</html>

Макет страницы на Flexbox

Итак, flex-контейнером верхнего уровня здесь является элемент body. Его flex-элементами являются header, main и footer. Body располагает все свои элементы сверху вниз в столбик. Здесь также стоит отметить, что при ширине от 600px и выше для заполнения всего пространства браузера у body устанавливается стиль height: 100vh;.

Элементы header и footer аналогичны. Их свойство flex: 0 0 5em; указывают, что при любом изменении контейнера эти элементы будут иметь размер в 5em. То есть они имеют статический размер.

Более сложным является элемент main, который определяет основное содержимое. При этом будучи flex-элементом, он также является flex-контейнером для вложенных элементов и управляет их позиционированием. При ширине браузера до 600px он располагает элементы в столбик, что очень удобно на мобильных устройствах.

При ширине от 600px вложенные элементы nav, article и aside располагаются в виде строки. И поскольку при такой ширине браузера родительский элемент body заполняет по высоте все пространство браузера, то для заполнения всей высоты контейнера body при его изменении у элемента main устанавливается свойство flex: 1 1 auto;.

У вложенных в main flex-элементов стоит отметить, что элемент навигации nav и элемент сайдбара aside будут иметь одинаковые размеры при масштабировании контейнера. А элемент article, содержащий основное содержимое, будет соответственно больше. При этом хотя nav определен после элемента article, но благодаря установке свойства order: -1 блок навигации будет стоять до блока article.

Комментарии