Мистический inline-flex и что он делает – Stas Bagretsov – Medium

Это очень редко используемое свойство в CSS Flexbox и про него в принципе мало чего подробного написано в интернете. Но это не беда. В этой статье вы узнаете о том что же такое display:inline-flex и какие преимущества он даёт при вёрстке, а также про его отличия от display: flex.

Но в начале полезный перевод двух статей:

I Used CSS Inline Flex For The First Time

И

display: flex vs display: inline-flex

Как фронт-энд разработчик, я регулярно использую свойство CSS display в своей ежедневной работы. Я могу использовать block, grid или flex, как и его значения.

Во время работы над проектом, мне был нужен flex-контейнер, который в тот же момент был бы и инлайновым. Другими словами, мне нужно было, чтобы контент внутри контейнера был флексовым, но сам контейнер вёл себя как инлайновый элемент.

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

Итак, давайте посмотрим на дизайн, который мне нужно было сверстать:

У каждого бэджа есть своя уникальная иконка, отцентрированная горизонтально и вертикально. Центрирование, как вы уже наверное поняли, происходит с помощью Flexbox и все бэджи стоят в ряд, так как к ним применено display: inline-flex.

HTML:

Для уточнения, врапер .badges-list ничего не делает для инлайнового позиционирования элементов. Так происходит, потому что на его потомке .c-badge применяется inline-flex.

CSS:

.c-badge {    
display: inline-flex;    
justify-content: center;    
align-items: center;
}

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

Пример 1: display: flex

У трёх контейнеров с display: flex синий цвет, в них есть три потомка div’а, отмеченные красным цветом и имеющие flex: 1.

Каждый родительский контейнер находится на своей строке. А трое потомков занимают равную ширину.

$flexColor: #64B5F6;
$inlineColor: #F06292;

HTML:

Пример 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:

Объясняем примеры

Элемент с 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

Перевод статьи The CSS background-image property as an anti-pattern

Перевод статьи The CSS background-image property as an anti-pattern