Каковы различия между flex-основе и шириной?

Были вопросы и статьи по этому поводу, но, насколько я могу судить, нет ничего убедительного. Лучшее резюме, которое я смог найти, это

flex-based позволяет указать начальный / начальный размер элемента, прежде чем что-либо еще будет вычислено. Это может быть процент или абсолютное значение.

... что само по себе мало говорит о поведении элементов с набором flex- base. С моим текущим знанием flexbox я не понимаю, почему это также не может описать ширину .

Я хотел бы знать, чем именно flex-base отличается от ширины на практике:

• Если я заменю ширину на flex-base (и наоборот), что изменится визуально?
• Что произойдет, если я установлю другое значение? Что произойдет, если они имеют одинаковое значение?
• Существуют ли особые случаи, когда использование width или flex-based будет существенно отличаться от использования другого?
• Как ширина и основание Flex отличаются при использовании в сочетании с другими стилями flexbox, такими как flex-wrap , flex-grow и flex-shrink ?
• Есть ли другие существенные различия?

Изменить / уточнить : Этот вопрос был задан в другом формате в разделе Что такое наборы свойств flex-based? но я чувствовал, что было бы неплохо более прямое сравнение или обобщение различий flex-base и width (или height ).

Рассматривать flex-direction

Первое, что приходит на ум при чтении вашего вопроса - flex-basisэто не всегда применимо к width.

Когда flex-directionесть row, flex-basisконтролирует ширину.

Но когда flex-directionесть column, flex-basisконтролирует высоту.

Ключевые отличия

Вот некоторые важные различия между flex-basisи width/ height:

• flex-basisприменяется только к гибким предметам. Flex-контейнеры (которые также не являются flex-элементами) будут игнорировать, flex-basisно могут использовать widthи height.

• flex-basisработает только на главной оси. Например, если вы находитесь flex-direction: column, это widthсвойство будет необходимо для определения размера элементов Flex по горизонтали.

• flex-basisне влияет на абсолютно позиционированные гибкие элементы. widthи heightсвойства будут необходимы. Абсолютно позиционированные флекс-элементы не участвуют в флекс-макете .

• Используя flexсвойство, три свойства - flex-grow, flex-shrinkи flex-basis- может быть аккуратно объединены в одной декларации. Используя widthодно и то же правило, потребуется несколько строк кода.

Поведение браузера

С точки зрения того, как они отображаются, не должно быть никакой разницы между flex-basisи width, если не flex-basisявляется autoили content.

Из спецификации:

7.2.3. flex-basisнедвижимость

Для всех значений, кроме autoи content, flex-basisразрешается так же, как и widthв горизонтальных режимах записи.

Но влияние autoили contentможет быть минимальным или вообще ничего. Больше из спецификации:

auto

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

content

Указывает на автоматическое изменение размера в зависимости от содержимого элемента flex.

Примечание. Это значение отсутствовало в первоначальном выпуске Flexible Box Layout, поэтому некоторые старые реализации не будут его поддерживать. Эквивалентный эффект может быть достигнут при использовании autoвместе с основным размером ( widthили height) из auto.

Так что, согласно спецификации, flex-basisи widthрешать одинаково, если не flex-basisявляется autoили content. В таких случаях flex-basisможет использоваться ширина содержимого (которую, вероятно, widthбудет использовать и свойство).

flex-shrinkфактор

Важно помнить начальные настройки гибкого контейнера. Некоторые из этих настроек включают в себя:

• flex-direction: row - гибкие элементы будут выровнены по горизонтали
• justify-content: flex-start - гибкие элементы будут складываться в начале линии на главной оси
• align-items: stretch - гибкие элементы будут расширяться, чтобы охватить поперечный размер контейнера
• flex-wrap: nowrap - гибкие предметы вынуждены оставаться в одной строке
• flex-shrink: 1 - гибкий элемент может сжиматься

Обратите внимание на последний параметр.

Потому что гибкие предметы могут сокращаться по умолчанию (который предотвращает их от переполнения контейнера), указанный flex-basis/ width/ heightможет быть переопределен.

Например, flex-basis: 100pxили width: 100px, в сочетании с flex-shrink: 1, не обязательно будет 100px.

Чтобы отобразить указанную ширину и сохранить ее фиксированной, вам нужно отключить сжатие:

div {
   width: 100px;
   flex-shrink: 0;
}  

ИЛИ

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

ИЛИ, как указано в спецификации:

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2. Компоненты гибкости

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

Ошибки браузера

В некоторых браузерах возникают проблемы с определением размера элементов Flex во вложенных контейнерах Flex.

flex-basisигнорируется во вложенном гибком контейнере. widthработает.

При использовании flex-basisконтейнер игнорирует размеры своих дочерних элементов, и дочерние элементы переполняют контейнер. Но со widthсвойством контейнер учитывает размеры своих дочерних элементов и соответственно расширяется.

Ссылки:

• Chrome не расширяет флекс родительский по содержанию детей
• Flex-элемент переполняется при использовании flex-base
• Разница между шириной и гибкой основой
• Flex-base игнорируется при определении размера вложенных flex-контейнеров.
• flex-base: 100px делает что-то отличное от ширины: 100px + flex-base: auto

Примеры:

• https://jsfiddle.net/t419zhra/ (источник: @Dremora )
• https://codepen.io/anon/pen/NVxaoy (источник @Daniel )
• https://jsfiddle.net/voc9grx6/ (источник: Chromium Bugs )
• https://jsfiddle.net/qjpat9zk/ (источник: Chromium Bugs )

использование гибких элементов flex-basisи white-space: nowrapпереполнение inline-flexконтейнера. widthработает.

Похоже, что гибкий контейнер inline-flexне распознается flex-basisна дочернем white-space: nowrapэлементе при рендеринге брата (хотя это может быть просто элемент с неопределенной шириной). Контейнер не расширяется для размещения предметов.

Но когда widthсвойство используется вместо flex-basis, контейнер учитывает размеры своих дочерних элементов и соответственно расширяется. Это не проблема в IE11 и Edge.

Ссылки:

• ширина встроенного гибкого контейнера не увеличивается
• Встроенный гибкий контейнер (display: inline-flex) расширяет всю ширину родительского контейнера

Пример:

• https://jsfiddle.net/p18h0jxt/1/ (из первого поста выше)

flex-basis(и flex-grow) не работает над элементом таблицы

Ссылки:

• Почему flex-box работает с div, а не с таблицей?
• Почему не сгибают-растут: 1 работает за столом в Safari? (и Edge)

flex-basisпроисходит сбой в Chrome и Firefox, когда дедушка-родительский элемент является усадочным элементом. Настройка отлично работает в Edge.

• Абсолютно позиционированный контейнер не расширяется по ширине, чтобы соответствовать содержимому flexbox

Как и в примере, представленном в приведенной выше ссылке, с position: absoluteиспользованием, floatи inline-blockтакже будет отображаться тот же некорректный вывод ( jsfiddle demo ).

Ошибки, влияющие на IE 10 и 11:

• flexстенографические объявления с единичными flex-basisзначениями игнорируются
• flex-basis не учитывает box-sizing: border-box
• flex-basis не поддерживает calc()
• Важность игнорируется flex-basisпри использовании flexсокращения

В дополнение к превосходному резюме Michael_B стоит повторить следующее:

flex-based позволяет указать начальный / начальный размер элемента, прежде чем что-либо еще будет вычислено. Это может быть процент или абсолютное значение.

Важная часть здесь является начальной .

Само по себе это разрешает ширину / высоту до тех пор, пока не вступят в игру другие свойства роста / сжатия.

Так. ребенок с

.child {
 flex-basis:25%;
 flex-grow:1;
}

сначала он будет иметь ширину 25%, но затем сразу же увеличится настолько, насколько это возможно, пока не будут учтены другие элементы. Если их нет, он будет иметь ширину 100% / высоту.

Быстрая демонстрация:

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

Эксперименты с flex-grow, flex-shrinkи flex-basis (или сокращением flex :fg fs fb) ... могут привести к некоторым интересным результатам.

Возможно, самый важный момент, чтобы добавить:

Что если браузер не поддерживает flex? В таком случае width/heightвступают во владение и их значения применяются.

Это очень хорошая идея - почти необходимая - для определения width/heightэлементов, даже если у вас тогда совершенно другое значение для flex-basis. Не забудьте проверить, отключив display:flexи увидев, что вы получаете.