В чем разница между display:inline-flex и display:flex?
Описание проблемы:
Я пытаюсь выровнять элементы по вертикали внутри контейнера с определённым ID. Я установил свойство display: inline-flex; для этого контейнера, так как он должен быть flex-контейнером.
Однако в результате я не наблюдаю изменений в отображении. Я ожидал, что все элементы внутри контейнера с ID будут выровнены по вертикали. Почему этого не происходит?
Вот мой код:
#wrapper {
display: inline-flex;
/* нет разницы с display: flex; */
}
<body>
<div id="wrapper">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
</body>
Почему элементы внутри контейнера не выравниваются, как я ожидал?
3 ответ(ов)
flex и inline-flex оба применяют флекс-раскладку к дочерним элементам контейнера. Контейнер с display: flex ведет себя как блочный элемент, тогда как display: inline-flex делает контейнер строчным элементом. Важно понимать, что это влияет на то, как контейнер взаимодействует с другими элементами на странице: блочные элементы занимают всю ширину, а строчные элементы располагаются в линию с другими элементами.
Вопрос: Как работает свойство display: flex и display: inline-flex?
Ответ: Свойство display: flex применяет флекс-разметку только к дочерним элементам контейнера. Это означает, что сам контейнер остается блочным элементом, занимает всю ширину экрана и, как следствие, каждый флекс-контейнер будет переноситься на новую строку.
С другой стороны, display: inline-flex применяет флекс-разметку как к дочерним элементам, так и к самому контейнеру. В результате контейнер ведет себя как встроенный флекс-элемент, занимая только ту ширину, которая требуется его дочерним элементам, а не всю ширину экрана.
Таким образом, если несколько флекс-контейнеров заданы с display: inline-flex, они будут выстраиваться рядом друг с другом до тех пор, пока не будет занята вся ширина экрана.
Вы можете отображать элементы flex в строку, если ваше предположение основывается на желании иметь гибкие встроенные элементы. Использование flex подразумевает использование гибкого блочного элемента.
Самый простой подход — это создать контейнер flex с его дочерними элементами, установленными с использованием свойства flex. В коде это будет выглядеть следующим образом:
.parent {
display: inline-flex;
}
.children {
flex: 1;
}
Свойство flex: 1 обозначает отношение, похожее на проценты от ширины элемента.
Посмотрите на эти две ссылки, чтобы увидеть простые живые примеры Flexbox:
Если вы используете первый пример:
https://njbenjamin.com/flex/index_1.htm
Вы можете поиграть с консолью браузера, чтобы изменить display контейнера между flex и inline-flex.
Как задать расстояние между элементами flexbox?
Как вертикально выровнять текст внутри flexbox?
Заполнение оставшейся высоты или ширины в flex-контейнере
Как расположить div внизу своего контейнера?
Как отключить перенос строк в HTML?