flex¶

Сокращённое свойство flex, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство.

Элементы могут быть растянуты пропорционально с учётом заданного соотношения или сжаты, чтобы целиком вместить все элементы без переносов в одну строку.

Демо¶

Синтаксис¶

 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

/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

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

Значения¶

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

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

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

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

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

none

Соответствует значению 0 0 auto.

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

• CSS Flexible Box Layout Module

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

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

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

CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

#flex-container {
    display: flex;
    flex-direction: row;
}

#flex-container > .flex-item {
    flex: auto;
}

#flex-container > .raw-item {
    width: 5rem;
}

HTML

1
2
3
4
5
6

<div id="flex-container">
    <div class="flex-item" id="flex">
        Flex box (click to toggle raw box)
    </div>
    <div class="raw-item" id="raw">Raw box</div>
</div>

Результат

См. также¶

• Руководство по Flexbox

Комментарии