Разница между дисплеем: inline-flex и display: flex

Мне сложно понять display:inline-flex; свойств display:inline-flex; , В чем разница между display:inline-flex; и display:flex; ?

Я пытаюсь вертикально выровнять некоторые элементы внутри обертки идентификатора. Вот почему я дал display:inline-flex; свойств display:inline-flex; к этому ID; потому что shell идентификатора является контейнером гибких дисков.

Но нет никакой разницы в презентации. Я ожидал, что все в идентификаторе обертки будет отображаться в inline .

 #wrapper { display: inline-flex; /*no difference to display:flex; */ } 
  
header
main
footer
в
header
main
footer
в
header
main
footer

Пример JSFiddle

В чем разница?

display: inline-flex не отображает элементы гибкой связи в строке. Это делает дисплей гибкого контейнера встроенным. Это единственная разница между display: inline-flex и display: flex . Аналогичное сравнение может быть выполнено между display: inline-block и display: block и практически любым другим типом отображения, имеющим встроенную копию . 1

Нет никакой разницы в эффекте на гибкие предметы; гибкий макет идентичен, является ли гибкий контейнер блочным или линейным. В частности, сами элементы гибки всегда ведут себя как блоки блочного уровня (хотя у них есть некоторые свойства встроенных блоков). Вы не можете отображать элементы гибкости inline; в противном случае на самом деле у вас нет гибкого макета.

Неясно, что именно вы подразумеваете под «вертикальным выравниванием» или почему именно вы хотите отображать содержимое в строке, но я подозреваю, что flexbox не подходит для всего, что вы пытаетесь выполнить. Скорее всего, именно то, что вы ищете, – это просто старый встроенный макет ( display: inline и / или display: inline-block ), для которого flexbox не является заменой; flexbox – это не универсальное решение для макетов, которое каждый утверждает, что это (я заявляю об этом, потому что неправильное представление, вероятно, связано с тем, почему вы рассматриваете flexbox в первую очередь).


1 Различия между макетом блока и встроенным макетом выходят за frameworks этого вопроса, но наиболее выделяющимся является автоматическая ширина: блоки уровня блока растягиваются горизонтально, чтобы заполнить их содержащий блок, тогда как ящики inline-уровня сокращаются, чтобы соответствовать их содержание. Фактически, именно по этой причине вы почти никогда не будете использовать display: inline-flex если у вас нет веской причины отображать встроенный гибкий контейнер.

flex и inline-flex применяют гибкую схему для детей контейнера. Контейнер с display:flex ведет себя подобно самому блочному элементу, а display:inline-flex делает контейнер ведшим как встроенный элемент.

Разница между «flex» и «inline-flex»

Короткий ответ:

Один из них встроен, а другой в основном реагирует как элемент блока (но имеет некоторые из его собственных отличий).

Более длинный ответ:

Inline-Flex – встроенная версия flex позволяет элементу и его дочерним элементам иметь свойства гибкости, сохраняя при этом постоянный stream документа / веб-страницы. В принципе, вы можете разместить два встроенных гибких контейнера в одной строке, если ширина была достаточно маленькой, без какого-либо избыточного стиля, чтобы позволить им существовать в той же строке. Это очень похоже на «встроенный блок».

Flex. Контейнер и его дочерние элементы имеют свойства гибкости, но контейнер резервирует строку, поскольку она вынимается из обычного streamа документа. Он реагирует как элемент блока с точки зрения streamа документов. Два контейнера flexbox не могли существовать в одной строке без лишнего стилирования.

Проблема, с которой вы можете столкнуться

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

Причина, по которой у вас возникают проблемы, состоит в том, что flex и inline-flex имеют свойство по умолчанию «flex-direction», установленное в «row». Это отобразит детей бок о бок. Изменение этого свойства на «столбец» позволит вашим элементам складывать и резервировать пространство (ширину), равное ширине его родительского элемента.

Ниже приведены примеры, показывающие, как работает flex vs inline-flex, а также краткая демонстрация того, как работают встроенные и блокирующие элементы …

 display: inline-flex; flex-direction: row; 

скрипка

 display: flex; flex-direction: row; 

скрипка

 display: inline-flex; flex-direction: column; 

скрипка

 display: flex; flex-direction: column; 

скрипка

 display: inline; 

скрипка

 display: block 

скрипка

Кроме того, отличный справочный документ: полное руководство по трюкам Flexbox – css

Хорошо, я знаю, сначала может быть немного запутанным, но display говорит о родительском элементе, поэтому это означает, когда мы говорим: display: flex; , речь идет о элементе, и когда мы говорим о display:inline-flex; , также делает элемент сам inline

Это как сделать div inline или block , запустить сниппт ниже, и вы можете увидеть, как display flex разбивается на следующую строку:

 .inline-flex { display: inline-flex; } .flex { display: flex; } p { color: red; } 
  

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer
в

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer
в

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer
в

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer
в

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer
в

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer
в

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer
в

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer
в

Display Inline Flex

header
main
footer
header
main
footer

Display Flex

header
main
footer
header
main
footer

Дисплей: flex применяет гибкую макет к элементам гибкости или детям только из контейнера. Таким образом, сам контейнер остается элементом уровня блока и, следовательно, занимает всю ширину экрана.

Это заставляет каждый гибкий контейнер перемещаться в новую строку на экране.

Дисплей: inline-flex применяет гибкий макет к элементам гибкости или детям, а также к самому контейнеру. В результате контейнер ведет себя как встроенный гибкий элемент, как и дети, и, следовательно, занимает ширину, требуемую только его элементами / дочерними элементами, а не всей шириной экрана.

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

Вам нужно немного больше информации, чтобы браузер знал, чего вы хотите. Например, детям контейнера нужно сказать «как» сгибаться.

Обновленный скрипт

Я добавил #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } в ваш CSS и изменили inline-flex на flex , и вы можете увидеть, как элементы теперь равномерно распределяются на странице.

  • Лучший способ установить расстояние между элементами flexbox
  • Как изменить обертку flexbox?
  • В чем разница между выравниванием и выравниванием элементов?
  • Установите детей из гибкого windows на разную высоту, чтобы использовать доступное пространство
  • Центрировать содержимое внутри столбца в Bootstrap 4
  • Chrome / Safari не заполняет 100% высоту гибкого родителя
  • Как получить заголовок с карточек или похожих предметов с одинаковой высотой с помощью гибкой коробки?
  • Прокладка-дно / верхняя часть в макете flexbox
  • Заполните оставшееся вертикальное пространство с помощью CSS с помощью дисплея: flex
  • Создайте сетку масонства с помощью flexbox (или другого CSS)
  • Макет сетки с реагирующими квадратами
  • Interesting Posts

    Почему для 64-битной Windows требуется отдельная папка «Program Files (x86)»?

    Как я могу использовать nohup, если сценарий оболочки занимает больше времени для запуска?

    Как включить многозадачность с новой библиотекой поддержки Android Multidex

    Имеет ли смысл использовать инструкцию LFENCE для процессоров x86 / x86_64?

    Как записи процесса Hadoop разбиваются по границам блоков?

    Просмотр инкрементных различий в моих версиях файлов с помощью Dropbox

    Привод DVD-RW не будет читать DVD-диски

    Как преобразовать текст в числа для всех ячеек в электронной таблице?

    Как извлечь список служб Windows и их статус в текстовый файл?

    Используйте LAN для взаимодействия с Synergy, когда Wi-Fi подключен к Интернету

    Спящий компьютер через командный файл в Windows 7

    RunDLL не перестанет появляться

    SwingUtilities.invokeLater

    Стиль прогрессивного WPF

    Аутентификация на основе токена в веб-API без какого-либо пользовательского интерфейса

    Давайте будем гением компьютера.