В чем разница между дисплеем: inline-flex и display: flex?
229560 просмотра
6 ответа
Я пытаюсь вертикально выровнять элементы в оболочке идентификатора. Я присвоил display:inline-flex;
этому идентификатору свойство, так как оболочкой идентификатора является гибкий контейнер.
Но нет разницы в представлении. Я ожидал, что все в идентификаторе оболочки будет отображаться inline
. Почему не так?
#wrapper {
display: inline-flex;
/*no difference to display:flex; */
}
<body>
<div id="wrapper">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
</body>
Ответы (6)
359 плюса
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
не будете использовать, если у вас нет веских причин для показа встроенного контейнера.
53 плюса
flex
и inline-flex
оба применяют гибкую компоновку для дочерних элементов контейнера. Контейнер с display:flex
ведет себя как сам элемент блочного уровня, в то время display:inline-flex
как контейнер ведет себя как встроенный элемент.
46 плюса
Хорошо, я знаю, что сначала это может немного сбить с толку, но display
речь идет о родительском элементе, так что это означает, что когда мы говорим: display: flex;
речь идет об элементе, а когда мы говорим display:inline-flex;
, также создает сам элемент inline
...
Это все равно, что сделать div
inline или block , запустить фрагмент ниже, и вы увидите, как display flex
разбивается следующая строка:
.inline-flex {
display: inline-flex;
}
.flex {
display: flex;
}
p {
color: red;
}
<body>
<p>Display Inline Flex</p>
<div class="inline-flex">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
<div class="inline-flex">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
<p>Display Flex</p>
<div class="flex">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
<div class="flex">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
</body>
Также быстро создайте изображение ниже, чтобы сразу увидеть разницу:
Автор: Alireza Размещён: 21.10.2017 03:0128 плюса
Разница между "flex" и "inline-flex"
Краткий ответ:
Один из них встроенный, а другой в основном отвечает как блочный элемент (но имеет некоторые свои отличия).
Более длинный ответ:
Inline-Flex - встроенная версия flex позволяет элементу и его дочерним элементам иметь свойства flex, оставаясь при этом в обычном потоке документа / веб-страницы. По сути, вы можете разместить два встроенных гибких контейнера в одном ряду, если ширина была достаточно малой, без какого-либо лишнего стиля, позволяющего им существовать в одном ряду. Это очень похоже на «встроенный блок».
Flex - Контейнер и его дочерние элементы имеют свойства flex, но контейнер резервирует строку, поскольку она извлекается из обычного потока документа. Он отвечает как блочный элемент с точки зрения потока документов. Два контейнера flexbox не могут существовать в одном ряду без лишней стилизации.
Проблема у вас может быть
Из-за элементов, которые вы перечислили в своем примере, хотя я предполагаю, я думаю, вы хотите использовать flex, чтобы отображать элементы, перечисленные равномерно по строкам, но по-прежнему видеть элементы рядом друг с другом.
Причина, по которой у вас, вероятно, возникли проблемы, заключается в том, что для flex и inline-flex свойство flex-direction по умолчанию имеет значение «row». Это будет отображать детей рядом. Изменение этого свойства на «столбец» позволит вашим элементам складываться и резервировать пространство (ширину), равное ширине его родительского элемента.
Ниже приведены некоторые примеры, показывающие, как работает flex vs-inline-flex, а также краткая демонстрация того, как элементы inline vs block работают ...
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
Автор: Aaron Loften Размещён: 10.12.2016 09:0813 плюса
Отображение: flex применяет гибкий макет только к элементам flex или дочерним элементам контейнера. Таким образом, сам контейнер остается элементом уровня блока и, таким образом, занимает всю ширину экрана.
Это заставляет каждый гибкий контейнер перемещаться на новую строку на экране.
Дисплей: inline-flex применяет гибкий макет к элементам flex или дочерним элементам, а также к самому контейнеру. В результате контейнер ведет себя как встроенный гибкий элемент точно так же, как и дочерние элементы, и, таким образом, он принимает ширину, требуемую только его элементами / дочерними элементами, а не всю ширину экрана.
Это приводит к тому, что два или более гибких контейнера один за другим, отображаемые как inline-flex, выравниваются друг с другом на экране, пока не будет получена вся ширина экрана.
Автор: Noor Jahan Mukammel Размещён: 09.01.2017 04:401 плюс
Вам нужно немного больше информации, чтобы браузер знал, что вы хотите. Например, дочерним элементам контейнера нужно сказать «как» сгибаться.
Я добавил #wrapper > * { flex: 1; margin: auto; }
к вашему CSS и изменил inline-flex
на flex
, и вы можете видеть, как элементы теперь равномерно распределяются на странице.
Вопросы из категории :
- css Как определить, какой из указанных шрифтов был использован на веб-странице?
- css Создание закругленных углов с помощью CSS
- css Как автоматически изменить размер текстовой области с помощью Prototype?
- css Как вы можете настроить номера в упорядоченном списке?
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- css Как заставить нижний колонтитул оставаться внизу веб-страницы?
- css3 Как я могу изменить порядок моих div с CSS?
- css3 Как заставить div заполнить оставшееся горизонтальное пространство?
- css3 Как нарисовать вертикальный текст с помощью кросс-браузера CSS?
- css3 Разверните div, чтобы взять оставшуюся ширину
- css3 Установить размер на фоновое изображение с помощью CSS?
- flexbox Как выровнять 3 деления (слева / по центру / справа) внутри другого деления?
- flexbox Как мне сохранить два соседних элемента одинаковой высоты?
- flexbox возможно ли анимировать вставки и извлечения flexbox?
- flexbox Вертикально отцентрировать два элемента внутри div
- flexbox Как я могу заполнить div с изображением, сохраняя его пропорциональным?
- flexbox Flexbox и вертикальная прокрутка в приложении полной высоты с использованием NEWER Flexbox API