flex¶
Сокращённое свойство flex
, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство.
Элементы могут быть растянуты пропорционально с учётом заданного соотношения или сжаты, чтобы целиком вместить все элементы без переносов в одну строку.
Flexbox и выравнивание
Руководство по Flexbox
Синтаксис¶
/* 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
.
Примечание
Safari до версии 9 поддерживает свойство -webkit-flex
.
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
CSS
#flex-container {
display: flex;
flex-direction: row;
}
#flex-container > .flex-item {
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
HTML
<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>
Результат