flex Сокращённое свойство flex
Элементы могут быть растянуты пропорционально с учётом заданного соотношения или сжаты, чтобы целиком вместить все элементы без переносов в одну строку.
Демо 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 /* 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.
Описание и примеры 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 : 5 rem ;
}
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 >
Результат
См. также 