Блог

Как говорится в веб-документах MDN : «Свойство flex является сокращением для «гибкого роста», «гибкого сжатия», «гибкой основы».

Синтаксис с одним значением: значение должно быть одним из:

a <number> : В этом случае он интерпретируется как flex: <number> 1 0 ; значение «усадка при изгибе» принимается равным 1, а значение «основа при изгибе» принимается равным 0.

Вот пример w3school, который управляет макетом контейнера, помещая flex: 50% и flex: 100% в дочерние столбцы после воздействия на запрос мультимедиа.

Очевидно , что это 100% не для flex-growing , это используется как flex-basis . Но как это возможно? Если существует одно значение, его следует принимать за flex-grow .

Я что-то здесь упускаю? Это % из-за того, что причины должны учитываться flex-basis ?

Если вы обратитесь к спецификации, которую вы можете прочитать:

Ценность: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Средства || :

Двойная полоса ( || ) разделяет два или более варианта: один или несколько из них должны встречаться в любом порядке.

Если вы укажете значение percetange, это явно не <'flex-grow'> <'flex-shrink'>? так <'flex-basis'>

Если вы укажете номер, то этого не может быть <'flex-basis'> , потому что он не принимает number , поэтому он будет <'flex-grow'> <'flex-shrink'>? и ? означает:

Знак вопроса ( ? ) указывает, что предыдущий тип, слово или группа являются необязательными (встречается ноль или один раз).

Так что это <'flex-grow'>

Вот еще несколько комбинаций:

 flex: 1 1 --> <'flex-grow'> <'flex-shrink'>

flex: 1 50% 
  1   -->  <'flex-grow'> <'flex-shrink'>? --> <'flex-grow'>
  50% --> <'flex-basis'>