Что я говорю флексбоксу с этой опцией flex: 1 0 auto?

Что означают 1, 0 и машина?flex: 1 0 auto;

3 значения: flex-grow | гибкая термоусадка | гибкая основа

<'flex-grow'>
Определяет flex-growflex-элемент. Подробнее <number>см. Отрицательные значения не считаются действительными. По умолчанию 1, если опущено.

Свойство flex-growCSS указывает коэффициент роста гибкого элемента. Указывает, сколько места элемент должен занимать в контейнере flex.

• В вашем случае 1, то есть размер пропорционален 1.

<'flex-shrink'>
Определяет flex-shrinkflex-элемент. Подробнее <number>см. Отрицательные значения не считаются действительными. По умолчанию 1, если опущено.

Свойство flex-shrinkCSS определяет коэффициент гибкости гибкого элемента.

• В вашем случае 0, то есть он будет уменьшаться в 0 раз быстрее, чем его братья и сестры.

<'flex-basis'>
Определяет flex-basisflex-элемент. Принимаются любые допустимые значения свойств ширины и высоты. Предпочтительный размер 0 должен иметь единицу измерения, чтобы его не интерпретировали как гибкий. По умолчанию 0%, если не указано.

Свойство flex-basisCSS указывает базу гибкости, которая является начальным размером элемента гибкости. Это свойство определяет размер блока содержимого, если иное не указано с помощью box-sizing.

• В вашем случае auto, то есть его первоначальный размер будет рассчитан автоматически.

Источник: flex - CSS | МДН

Общие значения гибкости:

Flex: 0 автомобилей;

Это то же самое flex: initial;, что и сокращение для значения по умолчанию: flex: 0 1 auto. Размер элемента задается на основе его ширины/высоты (или его содержимого, если оно не задано).

Гибкость: авто;

Это эквивалентно flex: 1 1 auto. Будьте осторожны, это не значение по умолчанию. Он изменяет размер элемента в зависимости от его ширины/высоты, но делает его полностью гибким, поэтому он поглощает любое дополнительное пространство вдоль главной оси.

Гибкость: нет;

Это эквивалентно flex: 0 0 auto. Он изменяет размер элемента в соответствии с его шириной/высотой, но делает его полностью негибким.

Шрифт

csscss3 _

Согласно документации w3c.org (официальный сайт), свойство flexпозволяет контейнеру выделять свободное пространство своим элементам (пропорционально их коэффициенту гибкости grow) для заполнения контейнера или сжимать их (пропорционально коэффициенту гибкости shrink) для предотвращения переполнения . (перелив).

Как видите, в документации рассказывается о двух свойствах элементов, содержащихся в контейнере flexв его собственном определении. Однако свойство flexможет принимать следующие значения:

none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

И начальное значение свойства flex:

flex: 1 0 auto

Каждому из возможных значений свойства flexсоответствует:

• flex-grow: Это фактор роста. Соответствует числу, которое определяет, насколько flex-элемент будет расти относительно остальных flex-элементов внутри контейнера flex, если есть свободное место. Когда он опущен, это эквивалентно установке 1.

• flex-shrink: это значение указывает коэффициент сжатия и определяет, насколько flex-элемент будет сжиматься по отношению к остальным flex-элементам внутри контейнера flex, если в контейнере закончится место. Когда он опущен, это эквивалентно установке 1.

• flex-basis: это значение указывает начальное значение гибкого элемента до того, как свободное пространство будет распределено в соответствии с коэффициентами гибкости ( flex-growи flex-shrink). Если он опущен, его значение по умолчанию равно 0.

Значения, которые он может принимать flex-basis:

• auto: когда он принимает это значение, он flex-basisпринимает значение основного свойства размера, используемого как flex-basis. Если это значение autoсамо по себе, то используется значение content.

• content: указывает на автоматическое изменение размера на основе содержимого гибкого элемента.

• width: Для всех остальных значений flex-basisразрешается так же, как ширина и высота.

• none: значение none эквивалентно 0 0 auto.

Наконец, я оставляю изображение, также взятое из документации, в котором различается установление «абсолютной» гибкости (начиная с flex-basis0) или «относительной» гибкости (начиная с размера содержимого элемента в качестве основы). Три элемента имеют коэффициенты изгиба 1, 1 и 2 соответственно. Обратите внимание, что элемент с коэффициентом гибкости, равным 2, увеличивается в два раза.