Каковы различия между 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
может будь минимален или вообще ничего. Больше от спецификации:
при указании на элементе flex,
auto
ключевое слово получает значение свойства main size в качестве используемогоflex-basis
. Если это значение самauto
, тогда используется значениеcontent
.указывает автоматическая калибровка на основе содержимого элемента flex.
Примечание: это значение не присутствовало в первоначальном выпуске гибкого Макет коробки, и, следовательно, некоторые старые реализации не будут поддерживать его. Эквивалентный эффект может быть достигнут с помощью
auto
вместе с основной размер (width
илиheight
) ofauto
.
Итак, согласно спецификации,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 */
авторам рекомендуется контролировать гибкость с помощью
flex
стенография а не с его свойствами longhand напрямую, как стенография правильно сбрасывает любые неопределенные компоненты для размещения общий использует.
Ошибки Браузера
ошибка, затрагивающая все основные браузеры, кроме IE 11 & Edge:
flex-basis
игнорируется во вложенном контейнере flex. width
строительство.
обнаружена проблема при определении размеров элементов flex во вложенном flex контейнер.
при использовании flex-basis
, контейнер игнорирует размер своих детей, и дети переполняют контейнер. Но с width
свойство, контейнер уважает размер своих детей и расширяет соответственно. Это не проблема в IE11 и Edge.
ссылки:
- Chrome не расширяет Flex parent в соответствии с детским контентом
- разница между шириной и flex-basis
- Flex-basis игнорируется при калибровке вложенных контейнеров flex.
- flex-basis: 100px делает что-то отличное от ширины:100px+flex-basis:auto
примеры:
- https://jsfiddle.net/t419zhra/ (источник: @Dremora)
- https://jsfiddle.net/voc9grx6/ (источник: Баги Хрома)
- https://jsfiddle.net/qjpat9zk/ (источник: Баги Хрома)
flex элементы с помощью 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:
в дополнение к отличному резюме 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
и посмотреть, что вы получите.