Які відмінності між flex-основою та шириною?

Про це були запитання та статті, але, наскільки я можу сказати, нічого переконливого. Найкращий підсумок, який я міг знайти, - це

flex-base дозволяє задавати початковий / початковий розмір елемента, перш ніж все інше буде обчислено. Це може бути або відсоткове, або абсолютне значення.

... що саме по собі не багато говорить про поведінку елементів із набором флекс-бази . З моїх нинішніх знань про флексокс я не розумію, чому це також не могло описати ширину .

Мені хотілося б дізнатися, чим саме flex-base відрізняється від ширини на практиці:

• Якщо я заміню ширину на flex-основу (і навпаки), що візуально зміниться?
• Що станеться, якщо я встановив обидва на інше значення? Що станеться, якщо вони мають однакове значення?
• Чи є якісь особливі випадки, коли використання або ширини, або флекс-базису матиме суттєву різницю від використання іншого?
• Як ширина та флекс-основа відрізняються при використанні у поєднанні з іншими стилями флексбоксу, такими як flex-wrap , flex-зростання та flex-shrink ?
• Будь-які інші суттєві відмінності?

Редагування / уточнення : Це питання було задано в іншому форматі у розділі Що саме встановлює властивість flex-base? але я відчув, що більш прямим порівнянням або підсумком різниць основи та ширини (або висоти ) буде непогано.

Розглянемо flex-direction

Перше, що спадає на думку, читаючи ваше запитання, - flex-basisце не завжди стосується width.

Коли flex-directionє row, flex-basisрегулює ширину.

Але коли flex-directionє column, flex-basisконтролює висоту.

Ключові відмінності

Ось кілька важливих відмінностей між flex-basisта width/ height:

• flex-basisстосується лише гнучких предметів. Flex контейнери (які також не є гнучкими елементами) ігнорують, flex-basisале можуть використовувати widthі height.

• flex-basisпрацює лише на головній осі. Наприклад, якщо ви знаходитесь flex-direction: column, widthвластивість знадобиться для розміщення гнучких елементів горизонтально.

• 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.

Примітка. Це значення не було в початковому випуску гнучкої схеми Box Box, і тому деякі старі реалізації не підтримують його. Еквівалентний ефект можна досягти, використовуючи autoразом з основним розміром ( widthабо height) auto.

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

The 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 не обов'язково буде 100 пікселів.

Щоб відобразити задану ширину - і зберегти її фіксованою - вам потрібно буде відключити скорочення:

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-basisігнорується в вкладеному контейнері flex. widthпрацює.

Під час використання flex-basisконтейнер ігнорує розмір своїх дітей, і діти переповнюють контейнер. Але зwidth властивість, контейнер поважає розмір своїх дітей і відповідно розширюється.

Список літератури:

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

Приклади:

• 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.

Список літератури:

• inline flex ширина контейнера не зростає
• Inline flex контейнер (дисплей: inline-flex) розширює повну ширину батьківського контейнера

Приклад:

• https://jsfiddle.net/p18h0jxt/1/ (з першого повідомлення вище)

flex-basis(і flex-grow) не працює над елементом таблиці

Список літератури:

• Чому флекс-бокс працює з дівом, а не столом?
• Чому не розвивається гнучкість: 1 робота за столом у Safari? (і Edge)

flex-basisвиходить з ладу в Chrome і Firefox, коли контейнер для бабусь і дідусів є елементом, що підлягає зменшенню. Настройка прекрасно працює в Edge.

• Абсолютно розміщений контейнер, не розширюючи ширину для вмісту флексокса

Як і у прикладі, представленому у наведеному вище посиланні, із залученням 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-base дозволяє задавати початковий / початковий розмір елемента, перш ніж все інше буде обчислено. Це може бути або відсоткове, або абсолютне значення.

Тут важлива частина - початкова .

Це само по собі дозволяє вирішити ширину / висоту, поки інші властивості зростати / зменшуватися не вступають у дію.

Так. дитина с

.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і побачивши, що ви отримаєте.