«
»
CSSWEBПримеры

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

Мистический 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-контейнер, который в тот же момент был бы и инлайновым. Другими словами, мне нужно было, чтобы контент внутри контейнера был флексовым, но сам контейнер вёл себя как инлайновый элемент.

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

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

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

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

У каждого бэджа есть своя уникальная иконка, отцентрированная горизонтально и вертикально. Центрирование, как вы уже наверное поняли, происходит с помощью 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; }

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

Пример 1: display: flex

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

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

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

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>

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

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

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

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

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

Источник записи: https://medium.com

Связанные записи
LinuxWEBWordPressПанели управления

Как уменьшить нагрузку на сервер и повысить скорость WordPress с помощью Memcached | Форум Plesk

WEBWordPress

Как добавить «Режим чтения» в ваши сообщения на блоге

WEBWordPress

6 важных тенденций SEO на 2020 год и последующий период (наши мысли)

WEB

Beaker Browser - Одноранговый браузер для веб-хакеров и разработчиков.