flex

❮ Назад CSS Справочник Далее ❯

Пример

Пусть все гибкие элементы будут одинаковой длины, независимо от их содержимого:

#main div {
-ms-flex: 1; /* IE 10 */
flex: 1;
}

Попробуйте сами »

Определение flex

CSS свойство flex это сокращенное свойство для:

CSS свойство flex задает гибкую длину для гибких элементов.

Примечание: Если элемент не является гибким элементом, свойство CSS flex не имеет никакого эффекта.

Показ демо ❯

Значение по умолчанию:	0 1 auto
Унаследовано:	no
Анимируемый:	yes, просмотр отдельных свойств. Читайте о animatable
Версия:	CSS3
JavaScript синтаксис:	object.style.flex="1" Попробуй

Поддержка flex

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Цифры, за которыми следуют -webkit-, -ms- или -moz - указывают первую версию, которая работала с префиксом.

Свойство
flex	29.0 21.0-webkit-	11.0 10.0-ms-	28.0 18.0-moz-	9.0 6.1-webkit-	17.0

Синтаксис flex

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Значения flex

Значение	Описание	Демонстрация
flex-grow	Число, указывающее, насколько увеличится номенклатура по отношению к остальным гибким номенклатурам	Демо ❯
flex-shrink	Число, указывающее, насколько изделие уменьшится по сравнению с остальными гибкими изделиями
flex-basis	Длина элемента. Допустимые значения: "auto", "inherit" или number, за которым следуют "%", "px", "em" или любая другая единица измерения длины	Демо ❯
auto	То же, что 1 1 auto.
initial	То же, что 0 1 auto. Читайте о initial
none	То же, что 0 0 auto.
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры flex

Пример

Использование flex вместе с медиа-запросами для создания разного макета для разных размеров экрана/устройств:

.flex-container {
display: flex;
flex-wrap: wrap;
}

.flex-item-left {
flex: 50%;
}

.flex-item-right {
flex: 50%;
}

/* Адаптивный макет - создает макет в одну колонку (100%) вместо макета в две колонки (50%) */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}

Попробуйте сами »