Динамический разделитель строк через Flexbox

Динамический разделитель строк через Flexbox

От автора: при работе с UI мне нужно было добавить разделитель между двумя секциями. Вот так, как показано на изображении ниже в статье.

Динамический разделитель строк через Flexbox

На экранах поменьше разделитель должен становиться горизонтальным:

Динамический разделитель строк через Flexbox

Давайте рассмотрим HTML.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

У нас есть секция с двумя дочерними элементами, между которых нам необходим разделитель. Для этого я воспользуюсь flexbox.

Элементы должны заполнять 50% от родителя. А также я добавил отступ в 1rem между ними. Как это выглядит:

Динамический разделитель строк через Flexbox

Далее я хочу центрировать 2 элемента вертикально. Для этого я применю к родителю align-items.

Теперь оба элемента центрированы (добавил красную линию, чтобы легче понять). Вы можете спросить, зачем вообще это делать с помощью разделителя? Я вас прекрасно понимаю, но давайте продолжим.

Динамический разделитель строк через Flexbox

Добавляем разделитель

Я хотел добавить разделитель через псевдоэлемент и написал CSS. Можете представить, как он будет выглядеть без прокручивания страницы далее?

Что же делает этот маленький квадратик на скриншоте ниже? Псевдоэлемент представляет собой бордер в 1px со всех сторон – то есть квадрат 2х2.

Динамический разделитель строк через Flexbox

Теперь давайте сосредоточимся. Далее я расскажу про основной трюк. Квадрат получается из-за того, что бордер со всех сторон одного цвета. Если использовать разные цвета, он может выглядеть так.

Динамический разделитель строк через Flexbox

Почему разделитель выглядит как квадрат?

Мы добавили align-items: center для вертикального центрирования элементов. То есть мы удалили стандартное поведение flexbox, когда дочерние элементы растягиваются (в нашем случае вертикально). Чтобы это исправить, нам нужно сбросить выравнивание псевдоэлемента до значения stretch.

Теперь это выглядит так:

Динамический разделитель строк через Flexbox

Теперь нужно поменять порядок элементов, чтобы разделитель встал между ними.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Готово!

Динамический разделитель строк через Flexbox

Чтобы разделитель работал на всех размерах экранов, нужно добавить flex-direction: column для мобильных устройств и flex-direction: row для экранов побольше.

Ниже можно посмотреть видео, где меняется flex-direction. Обратите внимание на то, как изменяется разделитель!

Чистая магия, именно так себя ведет flexbox. Когда задано свойтсво flex-direction: row, поперечная ось выстраивается вертикально, и псевдоэлемент вытягивается вертикально.

Динамический разделитель строк через Flexbox

А если поперечная ось установлена flex-direction: column, то есть горизонтально, то и псевдоэлемент растягивается горизонтально.

Динамический разделитель строк через Flexbox

Элегантно, правда? Не нужны width, height или что-либо еще! Просто бордер, растянутый через flexbox.

Толщина разделителя

Наш бордер указан по всем четырем сторонам. Поэтому нам нужно использовать 0.5x от необходимой толщины. Если нам нужно задать разделитель толщиной 1px, то бордер должен обладать следующими свойствами:

Градиентные разделители

Это еще один плюс в копилку border, и почему я использую именно этот способ. Мы можем задействовать градиенты через border-image.

Динамический разделитель строк через Flexbox

Пунктирные разделители

Мы используем border, то есть мы можем сделать разделитель пунктирным.

Динамический разделитель строк через Flexbox

Еще один способ

Если бы я не подумал, то я использовал бы width и height. Не говорю, что следующий способ плохой. Но классно когда для решения UI проблемы мы не используем проверенное готовое решение, а ищем что-то новое.

Демонстрация

Надеюсь, вы узнали что-нибудь новое. Спасибо за чтение!

Автор: Ahmad Shadeed

Источник: ishadeed.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментирование закрыто.