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

Я начал использовать flexbox в последнее время, и часто возникает ситуация, когда мне нужно распределить пространство на главной оси между элементами.

Я часто колеблюсь между width и flex-grow . Например, если я хочу, чтобы один элемент измерял 2 меры, а другой 1 показатель, добавляя до 100%, у меня есть два варианта. Я могу либо установить width: 66.6% и width: 33.3% , либо flex-grow: 2 и flex-grow: 1 .

Иногда, если я хочу, чтобы один элемент увеличивал остальную часть пространства, я могу либо сделать width: 100% либо flex-grow: 1 .

Как выбрать? Каковы различия / соображения в использовании ширины и гибкости?

width и flex-grow это два совершенно разных свойства CSS.

Свойство width используется для определения ширины элементов.

Свойство flex-grow используется для распределения свободного пространства в гибком контейнере. Это свойство не применяет определенную длину к элементу, например свойство width . Он просто позволяет гибкому элементу потреблять любое пространство, которое может быть доступно.

Иногда, если я хочу, чтобы один элемент увеличивал остальную часть пространства, я могу либо сделать width: 100% либо flex-grow: 1 . Как выбрать?

Да, если в строке есть один элемент, width: 100% и flex-grow: 1 может иметь такой же эффект (в зависимости от настроек padding , border и box-sizing ).

Но что, если есть два элемента, и вы хотите, чтобы второй взял оставшееся пространство? С братом в контейнере width: 100% вызывает переполнение. Я думаю, вы можете сделать что-то вроде этого:

 width: calc(100% - width of sibling); 

Но что, если ширина родного брата динамична или неизвестна? calc больше не является вариантом.

Быстрое и простое решение – flex-grow: 1 .


В то время как width и flex-grow , яблоки-апельсины, width и flex-basis – это яблоки-яблоки.

Свойство flex-basis задает начальный основной размер элемента flex и аналогично width .

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

Для различий между flex-basis и flex-grow см .:

  • flex-grow не подбирает гибкие элементы, как ожидалось
  • Заполните оставшееся вертикальное пространство с помощью CSS с помощью дисплея: flex
  • Сделайте div div двумя строками в сетке
  • свойство flexbox и wrap
  • firefox overflow-y не работает с вложенным flexbox
  • Как сделать детей Flexbox 100% высотой своего родителя?
  • Почему не влияет процентная нагрузка / маржа на элементы Flex в Firefox и Edge?
  • Как фактор flex-shrink при заполнении и приграничном поле?
  • Как получить заголовок с карточек или похожих предметов с одинаковой высотой с помощью гибкой коробки?
  • Каковы допустимые значения свойства `display` для гибкого элемента? (макет детей из гибкого предмета не имеет значения)
  • Как выровнять левую последнюю строку / строку в нескольких линиях flexbox
  • Проблема при центрировании по вертикали с помощью flexbox, когда высоты неизвестны
  • Давайте будем гением компьютера.