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

считают 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-basis не влияет на абсолютно позиционированные элементы гибкого трубопровода. width и height свойства были бы необходимы. абсолютно позиционированные элементы flex не участвуют в макете flex.

• с помощью 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.

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

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

---

The flex-shrink фактор

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

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

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

поскольку элементы flex могут сжиматься по умолчанию (что предотвращает их переполнение контейнера), указанный 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 стенография а не с его длинными свойствами непосредственно, как стенография правильно сбрасывает любые неопределенные компоненты для размещения общий использует.

---

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

ошибка, влияющая на все основные браузеры, кроме IE 11 & Edge:

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

обнаружена проблема при определении размеров элементов flex во вложенном flex контейнер.

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

ссылки:

• Chrome не расширяет Flex parent в соответствии с детским контентом
• разница между шириной и flex-basis
• Flex-basis игнорируется при определении размера вложенных контейнеров flex.
• гибкий график работы-основа:100 пикселей делает что-то другое из ширина:100 Пикс.+шлейф-базис:автоматическое

примеры:

• https://jsfiddle.net/t419zhra/ (источник: @Dremora)
• https://jsfiddle.net/voc9grx6/ (источник: Chromium Баги)
• https://jsfiddle.net/qjpat9zk/ (источник: Баги Хрома)

гибкие элементы с помощью flex-basis и white-space: nowrap переполнения inline-flex контейнер. width строительство.

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

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

ссылки:

• встроенная ширина контейнера гибкого трубопровода не растет
• встроенный контейнер гибкого трубопровода (дисплей: встроенный-гибкий трубопровод) расширяет полную ширину родителя контейнер

пример:

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

---

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

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