Flex-grow работает не так, как ожидалось (гибкие элементы не имеют ожидаемой ширины)

JSFiddle

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

Это выглядит так, как я хочу в IE10, но Chrome показывает, что он совсем другой. У меня в основном есть:

  • Контейнер
    • Выберите поле (flex:5), должно быть достаточно широко, чтобы показать D, но не намного шире.
    • Ввод текста (flex:10) должен занимать чуть более половины ширины содержимого
    • Кнопка подтверждения (flex:6) должна быть достаточно широкой, чтобы содержать ее текст, но не намного больше.

Он отлично работает в IE, но в Chrome первые два элемента занимают 50% от каждой ширины, оставляя кнопку подтверждения с конца.

Является ли моя логика Flex неправильной или Chrome испортился?

ОТВЕТЫ

Ответ 1

Часть flex-grow свойства flex (первое число) определяет, как дополнительное пространство должно быть распределено между элементами flex, когда их объединенный размер меньше, чем их гибкий контейнер. Дополнительное пространство делится так: [flex-grow value] / [sum of flex-grow values for all siblings]

  • Ввод текста: 10 / 21
  • Выберите поле: 5 / 21
  • Кнопка подтверждения: 6 / 21

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

Когда объединенный размер гибких элементов больше его контейнера, вступает в игру flex-shrink часть свойства flex (значение 2-го безразмерного). Это в основном обратная сторона flex-grow: отношения одинаковы, но размер переполнения вычитается из элемента flex вместо добавления.

Opera имеет очень хорошее объяснение этого свойства в статье Flexbox: http://dev.opera.com/articles/view/flexbox-basics/

Для вашей конкретной проблемы я смог решить ее в Chrome, установив ширину входного элемента на очень небольшое значение:

http://jsfiddle.net/JTEhW/2/

input {margin:0; width: 20px}

Это решение не работает в Opera, если вы добавите свойства unsrefixed. Вероятно, он тоже не будет работать в Firefox. Это также делает элементы слишком маленькими, чтобы их можно было использовать для браузеров Flexbox.