Каковы различия между flex-basis и width?

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

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

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

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

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

редактировать/пояснения: этот вопрос был задан в другом формате в какие именно наборы свойств flex-basis? но я чувствовал более прямое сравнение или резюме различий flex-basis и ширина (или высота) было бы здорово.

3 ответов


считают flex-direction

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

, когда flex-direction is row, flex-basis управление ширину.

но когда flex-direction is column, flex-basis управления высотой.


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

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

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

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

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

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


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

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

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

7.2.3. The flex-basis свойства

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

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

auto

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

content

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

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

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


на flex-shrink фактор

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

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

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

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


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

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

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

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

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

ссылки:

примеры:

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

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

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

ссылки:

пример:


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


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

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

важная часть здесь нач.

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

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

.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 (или стенография!--6-->)...может привести к интересным результатам.


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

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

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