Мистический inline-flex
и что он делает
Это очень редко используемое свойство в CSS Flexbox и про него в принципе мало чего написано. Но это не беда. В этой статье вы узнаете о том, что же такое display:inline-flex
и какие преимущества он даёт при вёрстке, а также поймете его отличия отdisplay: flex
.
👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
Перевод двух статей:
I Used CSS Inline Flex For The First Time
И
display: flex vs display: inline-flex
Inline-flex в первый раз
Как фронт-энд разработчик, я регулярно использую свойство CSS display
в своей ежедневной работе. Я могу использовать block
, grid
или flex
, как его значения.
Во время работы над проектом мне был нужен flex-контейнер, который в тот же момент был бы ещё и инлайновым. Другими словами, мне нужно было, чтобы контент внутри контейнера был флексовым, но сам контейнер вёл бы себя как инлайновый элемент.
Хорошо, что я вспомнил о display: inline-flex
. Никогда его до этого не использовал, но всегда видел его в DevTools браузера.
Итак, давайте посмотрим на дизайн, который мне нужно было сверстать:
У каждого бэджа есть своя уникальная иконка, отцентрированная внутри горизонтально и вертикально. Центрирование, как вы уже наверное поняли, происходит с помощью Flexbox и все бэджи стоят в ряд, так как к ним применено display: inline-flex
.
HTML:
<div class="badges-list">
<div class="c-badge">
<svg class="c-icon" width="24" height="24">..</svg>
</div>
<div class="c-badge">
<svg class="c-icon" width="24" height="24">..</svg>
</div>
<!-- другие бэджи -->
</div>
Для уточнения, врапер .badges-list
ничего не делает для инлайнового позиционирования элементов. Так происходит, потому что на его потомке .c-badge
применяется inline-flex
.
CSS:
.c-badge {
display: inline-flex;
justify-content: center;
align-items: center;
}
Ну и конечно же демка:
display: flex vs display: inline-flex
В чем тут разница?
Пример 1: display: flex
У трёх контейнеров с display: flex
синий цвет, в них есть три потомка div
’а, отмеченные красным цветом и имеющие flex: 1
.
Каждый родительский контейнер находится на своей строке. А трое потомков занимают равную ширину.
$flexColor: #64B5F6;
$inlineColor: #F06292;.container--inline-flex,
.container--flex {
background-color: $flexColor;
margin-bottom: 10px; /* для эстетичности*/
}
.container--flex {
display: flex;
}
.flex-child {
flex: 1;
min-width: 50px;
min-height: 50px;
margin: 10px;
background-color: $inlineColor;
}.flex-color {
color: $flexColor;
}
.inline-color {
color: $inlineColor;
}/* Визуальный CSS */
body {
font-family: 'Open Sans', sans-serif;
}
code {
background-color: #EEEEEE;
padding: 1px 5px;
}
HTML:
<div class="container--flex">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
<div class="container--flex">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
<div class="container--flex">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
Пример 2: display: inline-flex
К трем контейнерам в синем цвете применяем display: inline-flex
, в них есть три потомка div
’а, которые в красном цвете имеют flex:1
и min-width: 50px
.
Каждый родительский контейнер стоит сразу за другим, потому что они могут уместиться в один ряд. Ширина родительского контейнера зависит от размера потомков, которым тут был выставлен min-width
в 50px.
CSS, но уже с inline-flex
:
.container--inline-flex {
display: inline-flex;
}
HTML:
<div class="container--inline-flex">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
<div class="container--inline-flex">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
<div class="container--inline-flex">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
Объясняем примеры
Элемент с display:flex
очень схож с элементом, на котором стоит display: block
, потому что он забирает сразу всю строку. Однако, в сравнении с представленными до этого свойствами позиционирования, его потомки могут быть размещены в контейнере куда более гибко и динамично, нежели это было возможно ранее.
Если мы изменим display: flex
на display: inline-flex
:
Родительский контейнер будет показываться инлайново.
К потомкам могут быть применены все flex-свойства, разницы с display: flex
в этом плане совсем не будет.
В общем, это означает то, что если элементы потомки не слишком велики, то два контейнера с display: inline-flex
могут идти бок о бок в одной строке.
У других display
свойств тоже есть свои инлайновые близнецы:
У block
есть inline-block
У table
есть inline-table
И даже у grid
есть inline-grid
Больше про CSS Flex и его свойства вы можете прочитать в статье — Вёрстка на Flexbox в CSS. Полный справочник