Свойство flex
Свойство CSS flex - это сокращённое свойство, определяющее CSS-способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. При этом у родительского элемента должно быть установлено свойство display : flex (родительский элемент должен являться flex-контейнером).
На практике сокращение (shorthand) flex используется для того, чтобы убедиться, что заданы значения подсвойств flex-grow, flex-shrink и flex-basis.
Значение flex : none эквивалентно значению flex: 0 0 auto и означает, что размер элемента устанавливается в соответствии с его свойствами width и height: он полностью статичный, не сжимается и не увеличивается по отношению к адаптивному контейнеру.
Начальные значения каждого из подсвойств этого свойства:
- flex-grow: 0
- flex-shrink: 1
- flex-basis: auto.
Для центрирования элемента по осям flex-контейнера используются свойства:
- align-items;
- justify-content.
flex-grow
CSS-свойство flex-grow определяет количество свободного пространства во flex-контейнере, которое должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»):
- если все sibling-элементы (sibling items — элементы одного уровня вложенности) имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства;
- в противном случае свободное пространство распределяется в соответствии с соотношением, определённым коэффициентами flex-grow каждого элемента.
Отрицательные значения flex-grow считаются недействительными. Значение по умолчанию 0 (при наличии свободного места элементы не растягиваются).
flex-shrink
Свойство CSS flex-shrink определяет фактор сжатия flex-элемента, если ширина flex-элементов шире, чем содержащий их flex-контейнер.
flex-shrink используется вместе со свойствами flex-grow и flex-basis.
Отрицательные значения считаются недействительными. Значение по умолчанию 1.
flex-basis
CSS-свойство flex-basis задаёт размер flex-элемента по основной оси. Это свойство определяет размер контент-бокса, если он не задан через box-sizing.
Внимание: в случае, если для элемента одновременно заданы flex-basis (отличное от auto) и width (или height в случае flex-direction: column), flex-basis имеет приоритет.
Таким образом, приоритет CSS свойств, определяющих ширину элемента (по убыванию):
- max-width и min-width;
- flex-basis;
- width;
- content.