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

Многоколоночный дизайн на Flexbox

Рассмотрим, как сделать простейшие многоколонночные макеты страницы с помощью 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
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Flexbox в CSS3</title>
        <style>
            * {
                box-sizing: border-box;
            }
            html,
            body {
                padding: 0;
                margin: 0;
                font-family: verdana, arial, sans-serif;
            }

            body {
                display: flex;
                padding: 1em;
                flex-direction: column;
            }

            .item {
                background-color: #455a64;
                color: #fff;
                font-size: 1.1em;
                padding: 1em;
            }

            .item:nth-child(even) {
                background-color: #607d8b;
            }
            @media screen and (min-width: 600px) {
                body {
                    flex-direction: row;
                }
            }
        </style>
    </head>
    <body>
        <div class="item">
            <h2>Что такое Lorem Ipsum?</h2>
            <p>
                Lorem Ipsum - это текст-"рыба", часто
                используемый в печати и вэб-дизайне. Lorem
                Ipsum является стандартной "рыбой" для
                текстов на латинице с начала XVI века...
            </p>
        </div>

        <div class="item">
            <h2>Откуда он появился?</h2>
            <p>
                Многие думают, что Lorem Ipsum - взятый с
                потолка псевдо-латинский набор слов, но это
                не совсем так. Его корни уходят в один
                фрагмент классической латыни 45 года н.э...
            </p>
        </div>
    </body>
</html>

Здесь flex-контейнером является элемент body. Так как на мобильных устройствах (особенно смартфонах) размер экрана не такой большой, поэтому по умолчанию устанавливаем расположение элементов в столбик. Однако для устройств с экраном от 600рх и выше действует правило media-query, которое устанавливает расположение в виде строки.

Многоколоночный дизайн на 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
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Flexbox в CSS3</title>
        <style>
            * {
                box-sizing: border-box;
            }
            html,
            body {
                padding: 0;
                margin: 0;
                font-family: verdana, arial, sans-serif;
            }

            body {
                display: flex;
                padding: 1em;
                flex-direction: column;
            }

            .item {
                background-color: #455a64;
                color: #fff;
                font-size: 1.1em;
                padding: 1em;
                flex: 1;
            }

            .item:nth-child(1) {
                background-color: #607d8b;
            }
            @media screen and (min-width: 600px) {
                body {
                    flex-direction: row;
                }
                .item:nth-child(2) {
                    order: -1;
                }
            }
        </style>
    </head>
    <body>
        <div class="item">
            <h1>Что такое Lorem Ipsum?</h1>
            <p>
                Lorem Ipsum - это текст-"рыба", часто
                используемый в печати и вэб-дизайне. Lorem
                Ipsum является стандартной "рыбой" для
                текстов на латинице с начала XVI века. В то
                время некий безымянный печатник создал ...
            </p>
        </div>

        <div class="item">
            <h3>
                Классический текст Lorem Ipsum, используемый
                с XVI века
            </h3>
            <p>
                "Lorem ipsum dolor sit amet, consectetur
                adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud
                exercitation ullamco
            </p>
        </div>
        <div class="item">
            <h3>Где его взять?</h3>
            <p>
                Есть много вариантов Lorem Ipsum, но
                большинство из них имеет не всегда
                приемлемые модификации, например,
                юмористические вставки или слова, которые
                даже отдалённо не напоминают латынь.
            </p>
        </div>
    </body>
</html>

В отличие от предыдущего примера здесь добавлен еще один элемент. Особенностью этого примера является то, что столбцы имеют одинаковые размеры. Для этого у них установлено свойство flex: 1, то есть при растяжении или уменьшении границ контейнера все элементы будут масштабироваться на равную величину.

И кроме того, при ширине экрана больше 600px у второго элемента устанавливается свойство order: -1, благодаря чему этот элемент помещается первым:

Многоколоночный дизайн на Flexbox

Подобным образом мы можем добавить и большее количество столбцов. Но в данном случае по умолчанию столбцы имеют одинаковую ширину. Но что делать, если один из столбцов (как правило, центральный) должен иметь ширину больше, чем у остальных? Для этого добавим в стили страницы следующее правило:

1
2
3
.item:first-child {
    flex: 0 0 50%;
}

В этом случае первый элемент всегда будет занимать 50% пространства контейнера:

Многоколоночный дизайн на Flexbox

Комментарии