CSS flex ominaisuus

Määrittely ja käyttö

Flex on seuraavien ominaisuuksien lyhennetty muoto:

Flex asettaa joustavien projektien joustavuuden pituuden.

Huomautus:Jos elementti ei ole joustava projekti, flex-ominaisuus on voimaton.

Katso myös:

Ohje: CSS эластичный контейнер

См. также:CSS flex-basis ominaisuus

См. также:CSS flex-direction ominaisuus

См. также:CSS flex-flow ominaisuus

См. также:CSS flex-grow ominaisuus

См. также:CSS flex-shrink ominaisuus

См. также:CSS flex-wrap ominaisuus

См. также:HTML DOM flex свойство

Пример

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

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

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

CSS синтаксис

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

Значение свойства

Значение Описание
flex-grow Число, определяющее степень расширения элемента по сравнению с другими эластичными элементами.
flex-shrink Число, определяющее степень сжатия элемента по сравнению с другими эластичными элементами.
flex-basis

Длина элемента.

Допустимые значения: "auto"、"inherit" или значения в процентах, "px", "em" или других единицах длины.
auto Эквивалент 1 1 auto.
initial Эквивалент 0 1 auto. См. также: initial.
none Эквивалент 0 0 auto.
inherit Инherits this property from its parent element. См. также: inherit.

Технические детали

Значение по умолчанию: 0 1 auto
Инheritance: Нет
Создание анимации: Поддержка. См. отдельные свойства. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.flex="1"

Более примеров

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

.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%;
  }
}

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

Поддержка браузеров

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

Numerot, jotka sisältävät -webkit-、-ms- tai -moz- префиксы, представляют собой первую версию, использующую префиксы.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0