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

CSS3 22.02.2022

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

На меньших окнах просмотра линия станет горизонтальной:

растяжение CSS Flexbox

HTML:


<section class="section">
    <div class="section__item section__item--start">
        <!-- Content -->
    </div>
  
    <div class="section__item section__item--end">
        <!-- Content -->
    </div>
</section>

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

В CSS я буду использовать flexbox для обработки макета.


.section {
    display: flex;
    gap: 1rem;
    max-width: 700px;
    margin: 2rem auto;
}

.section__item {
    flex: 1;
}

Я добавил зазор в 1rem между каждым, а также каждый дочерний элемент должен заполнять 50% своего родителя. Вот результат:

динамического разделителя строк

Следующим шагом я хочу центрировать два элемента по вертикали, поэтому я буду использовать align-items для родителя.


.section {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* other styles */
}

.section__item {
    flex: 1;
}

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

Добавление сепаратора

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


.section:before {
    content: "";
    border: 1px solid #d3d3d3;
}

О, что такое эта маленькая площадь здесь? Поскольку псевдоэлемент - это только граница 1px со всех сторон, результат будет 2 * 2 квадрата.

Давайте сосредоточимся здесь немного. Это ядро этого маленького трюка CSS.

Площадь исходит с использованием того же цвета для каждой границы. С разными цветами это может выглядеть так.

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

Поскольку мы добавили align-items: center для центра дочерних элементов вертикально, мы удалили поведение по умолчанию Flexbox, растягивающие дочерние элементы (натягивание вертикально, в данном случае).

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


.section:before {
    content: "";
    border: 1px solid #d3d3d3;
    align-self: stretch;
}

Теперь это выглядит как следующие визуальные:

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


.section__item--start {
    order: -1;
}

И мы закончили!

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


.section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section:before {
    content: "";
    border: 1px solid #d3d3d3;
    align-self: stretch;
}

@media (min-width: 700px) {
    .section {
        align-items: center;
        flex-direction: row;
    }
}

Вот видео об изменении flex-direction. Обратите внимание, как изменяется сепаратор!

Это работает как магия, потому что это поведение Flexbox.

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

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

Разве это не аккуратно? Не нужно использовать width, height или что-то еще! Это просто border, простирающаяся через Flexbox.

Толщина сепаратора

Поскольку значение границы вносит вклад в четыре направления, нам нужно использовать 0,5x толщины, которую мы хотим. Например, если мы хотим сепаратор 1px, то граница должна быть похоже на следующую:


.section:before {
    content: "";
    border: 0.5px solid #d3d3d3;
    align-self: stretch;
}

Сепараторы градиента

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


.section:before {
    content: "";
    align-self: stretch;
    border: 1px solid #d3d3d3;
    border-image: linear-gradient(45deg, #3f51b5, #cddc39) 1;
}

Пунктирные сепараторы

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


.section:before {
    content: "";
    border: 1px dashed #d3d3d3;
    align-self: stretch;
}

Другой способ сделать это

Если я не принял время, чтобы подумать о реализации этого, то я мог бы использовать width и height. Я не говорю, что это плохое решение, но хорошо выйти из решений, которые мы взяли как должное и думать о других способах решения проблем пользовательских пользователей.


/* On small sizes */
.section:before {
    content: "";
    height: 2px;
    background-color: lightgrey;
}

@media (min-width: 700px) {
    .section:before {
        width: 2px;
        height: 150px;
    }
}