flex
Поддержка браузерами
|
|
|
|
|
|
| 11.0+ |
|
28.0+ |
29.0+ |
17.0+ |
9.0+ |
Описание
CSS свойство flex позволяет указать значения свойств flex-grow, flex-shrink и flex-basis в одном объявлении. То есть сразу определить начальную ширину и возможность сжатия или растяжения, в зависимости от доступного пространства.
| Значение по умолчанию: |
0 1 auto |
| Применяется: |
к flex-элементам |
| Анимируется: |
да |
| Наследуется: |
нет |
| Версия: |
CSS3 |
| Синтаксис JavaScript: |
object.style.flex="1"; |
Синтаксис
flex: flex-grow flex-shrink flex-basis|auto;
Значения свойства
| Значение |
Описание |
| flex-grow |
Число, указывающее возможность растягивания элемента. |
| flex-shrink |
Число, указывающее возможность сжатия элемента. |
| flex-basis |
Определение ширины элемента. |
| auto |
Определяет начальные значения для свойства - flex: 1 1 auto;. |
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#main {
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;
}
#main div {
flex: auto;
}
</style>
</head>
<body>
<div id="main">
<div style="background: #ff5c33;">1</div>
<div style="background: #ffad33;">2</div>
<div style="background: #00cc00;">3</div>
<div style="background: #3385ff;">4</div>
<div style="background: #d966ff;">5</div>
</div>
</body>
</html>
Попробовать »