display: inline-flex
не заставляет гибкие элементы отображаться встроенными. Это делает дисплей гибкого контейнера встроенным. Это единственная разница между display: inline-flex
и display: flex
. Подобное сравнение может быть сделано между display: inline-block
и display: block
, и в значительной степени любым другим типом отображения, который имеет встроенный аналог . 1
Нет абсолютно никакой разницы в воздействии на изгибаемые элементы; Компоновка flex одинакова для контейнеров на уровне блоков или на уровне строк. В частности, сами flex-элементы всегда ведут себя как блоки уровня блока (хотя у них есть некоторые свойства inline-блоков). Вы не можете отображать гибкие элементы встроенными; в противном случае у вас фактически нет гибкого макета.
Непонятно, что именно вы подразумеваете под «выравниванием по вертикали» или почему именно вы хотите отображать содержимое в строке, но я подозреваю, что flexbox - не тот инструмент, который вы пытаетесь выполнить. Скорее всего, то, что вы ищете, это просто старый встроенный макет ( display: inline
и / или display: inline-block
), для которого flexbox не является заменой; Flexbox - это не универсальное решение для разметки, которое, как все утверждают, есть (я утверждаю, что это неправильное представление, возможно, именно поэтому вы рассматриваете flexbox в первую очередь).
1 Различия между макетом блока и встроенным макетом выходят за рамки этого вопроса, но больше всего выделяется автоматическая ширина: блоки уровня блока растягиваются горизонтально, чтобы заполнить содержащий их блок, в то время как блоки встроенного уровня уменьшаются, чтобы соответствовать их размеру. содержание. На самом деле, только по этой причине вы почти никогда display: inline-flex
не будете использовать, если у вас нет веских оснований для показа встроенного контейнера.
inline-flex
иflex
: jsfiddle.net/mgr0en3q/1 Оригинала скрипки на @ рыба-графике и @astridxХорошо, я знаю, что сначала это может немного сбить с толку, но
display
речь идет о родительском элементе, так что это означает, что когда мы говорим:display: flex;
речь идет об элементе, а когда мы говоримdisplay:inline-flex;
, также создает сам элементinline
...Это все равно, что сделать
div
inline или block , запустить фрагмент ниже, и вы увидите, какdisplay flex
разбивается следующая строка:Также быстро создайте изображение ниже, чтобы сразу увидеть разницу:
источник
flex
иinline-flex
оба применяют гибкий макет для дочерних элементов контейнера. Контейнер сdisplay:flex
ведет себя как сам элемент блочного уровня, в то времяdisplay:inline-flex
как контейнер ведет себя как встроенный элемент.источник
Разница между "flex" и "inline-flex"
Короткий ответ:
Один встроенный, а другой в основном отвечает как блочный элемент (но имеет некоторые свои отличия).
Более длинный ответ:
Inline-Flex - встроенная версия flex позволяет элементу и его дочерним элементам иметь свойства flex, оставаясь при этом в обычном потоке документа / веб-страницы. По сути, вы можете разместить два встроенных гибких контейнера в одном ряду, если ширина была достаточно малой, без какого-либо лишнего стиля, позволяющего им существовать в одном ряду. Это очень похоже на «встроенный блок».
Flex - Контейнер и его дочерние элементы имеют свойства flex, но контейнер резервирует строку, поскольку она извлекается из обычного потока документа. Он отвечает как блочный элемент с точки зрения потока документов. Два контейнера flexbox не могут существовать в одном ряду без лишней стилизации.
Проблема у вас может быть
Из-за элементов, которые вы перечислили в своем примере, хотя я предполагаю, я думаю, вы хотите использовать flex, чтобы отображать элементы, перечисленные равномерно, строка за строкой, но продолжайте видеть элементы рядом друг с другом.
Причина, по которой у вас, вероятно, возникли проблемы, заключается в том, что для flex и inline-flex свойство flex-direction по умолчанию имеет значение «row». Это будет отображать детей рядом. Изменение этого свойства на «столбец» позволит вашим элементам складываться и резервировать пространство (ширину), равное ширине его родительского элемента.
Ниже приведены некоторые примеры, показывающие, как работает flex vs-flex, а также краткая демонстрация того, как элементы inline vs block работают ...
скрипка
скрипка
скрипка
скрипка
скрипка
скрипка
Кроме того, отличный справочный документ: Полное руководство по Flexbox - трюки CSS
источник
Отображение: flex применяет гибкий макет только к элементам flex или дочерним элементам контейнера. Таким образом, сам контейнер остается элементом уровня блока и, таким образом, занимает всю ширину экрана.
Это заставляет каждый гибкий контейнер перемещаться на новую строку на экране.
Дисплей: inline-flex применяет гибкий макет к элементам flex или дочерним элементам, а также к самому контейнеру В результате контейнер ведет себя как встроенный гибкий элемент точно так же, как и дочерние элементы, и, таким образом, он принимает ширину, требуемую только его элементами / дочерними элементами, а не всю ширину экрана.
Это приводит к тому, что два или более гибких контейнера один за другим, отображаемые как inline-flex, выравниваются друг с другом на экране, пока не будет получена вся ширина экрана.
источник
Вам нужно немного больше информации, чтобы браузер знал, что вы хотите. Например, дочерним элементам контейнера нужно сказать «как» сгибаться.
Обновленная скрипка
Я добавил
#wrapper > * { flex: 1; margin: auto; }
к вашему CSS и изменилinline-flex
наflex
, и вы можете видеть, как элементы теперь равномерно распределяются на странице.источник
Открыть в полной странице для лучшего понимания
источник