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

flex-direction

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере.

На само направление также влияет значение атрибута dir у контейнера.

Демо

Flexbox и выравнивание

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

Значения

Значение по-умолчанию: row

Наследуется: нет

Применяется к флекс-элементам

Анимируется: нет

row

Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.

row-reverse

Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо.

column

Главная ось располагается вертикально и направлена сверху вниз.

column-reverse

Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-direction.

Спецификации

Поддержка браузерами

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>flex-direction</title>
        <style>
            .flex-row {
                padding: 0;
                margin: 0;
                list-style: none;
                display: flex;
                flex-direction: row-reverse;
            }
        </style>
    </head>
    <body>
        <ul class="flex-row">
            <li><img src="image/thumb1.jpg" alt="" /></li>
            <li><img src="image/thumb2.jpg" alt="" /></li>
            <li><img src="image/thumb3.jpg" alt="" /></li>
        </ul>
    </body>
</html>

См. также

Комментарии