Css display flex поддержка браузерами

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; 

Значения¶

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

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

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

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

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

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

#flex-container  display: flex; flex-direction: row; > #flex-container > .flex-item  flex: auto; > #flex-container > .raw-item  width: 5rem; > 

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 boxdiv> div> 

См. также¶

Источник