Как использовать Flexbox для создания современного макета дизайна карты CSS

Благодаря Flexbox, новому режиму компоновки в CSS3, мы можем выстроить все наши карточки подряд — в буквальном смысле. За последние несколько лет популярность карточных дизайнов возросла; как вы, наверное, заметили, сайты социальных сетей очень активно используют карты. Pinterest и Dribbble используют макеты карточек для размещения информации и визуальных эффектов. А если вы увлекаетесь Material Design, карты Google хорошо описаны в их библиотеке шаблонов.

Мне лично нравятся макеты карточек за их удобочитаемость и возможность прокрутки. Они представляют идеальный «всплеск» информации таким образом, чтобы ее было легко просматривать, прокручивать и сканировать одновременно.

Как создать макет карты

Если вы когда-либо пробовали создавать ряды контента одинаковой высоты, вы знаете, что их построение не всегда было легким. Вам, вероятно, пришлось немного повозиться, чтобы заставить его работать в прошлом. Благодаря Flexbox эти дни остались позади. В зависимости от уровня поддержки браузера, который вам необходимо предоставить, вам, возможно, придется включить некоторые запасные варианты, но поддержка этой функции браузерами в наши дни довольно надежна. Чтобы быть в безопасности, обязательно ознакомьтесь с Flexbox на надежном сайте Can I use. И помните, вы никогда не должны вносить изменения в свой действующий сайт. Вместо этого попробуйте поэкспериментировать с Local — бесплатным локальным приложением для разработки WordPress.

Основная идея Flexbox заключается в том, что вы можете установить для свойства display контейнера значение flex , которое «изменит» размер всех контейнеров внутри него. Столбцы одинаковой высоты, а также параметры масштабирования и сжатия упростят создание расширенных макетов. Начинать с карточек — это как шпаргалка Flexbox, но как только вы освоите основы, вы сможете создавать более сложные макеты.

Flexbox и универсальность

Карточки универсальны, визуально привлекательны, с ними легко взаимодействовать как на больших, так и на маленьких устройствах, что идеально подходит для адаптивного дизайна. Каждая карточка действует как контейнер контента, который легко масштабируется вверх или вниз. По мере того, как размеры экрана становятся меньше, количество карточек в ряду обычно уменьшается, и они начинают складываться вертикально. Существует дополнительная гибкость, поскольку они могут быть фиксированной или переменной высоты.

Как создать макет

Мы создадим макет карты Flexbox, который будет иметь ряд из четырех горизонтальных контейнеров на больших экранах, два на средних и один столбец на маленьких устройствах.

Ниже приведен фрагмент кода для создания базового макета для отображения четырех карт. Я не включаю содержимое внутренней карточки (поскольку в примерах кода оно слишком длинное), поэтому обязательно поместите туда начальный контент (и количество содержимого будет варьироваться между четырьмя карточками). Кроме того, здесь показана одна строка из четырех карточек для начала, но можно добавить больше, если вы хотите увидеть поведение с несколькими строками содержимого. Весь код можно найти на Codepen.

Чтобы отобразить наш дизайн макета в виде сетки, нам нужно начать снаружи и продвигаться внутрь. Важно убедиться, что вы ссылаетесь на правильный контейнер, иначе все станет немного беспорядочным.

Раздел с классом .cards — это то, на что мы нацелимся в первую очередь. Свойство display контейнера — это то, что нам нужно изменить на flex .

Вот HTML, с которого вы хотите начать:

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

Вот CSS для начала:

.cards {
   display: flex;
   justify-content: space-between;
}

Гибкое свойство

Прежде чем углубляться в тему, полезно знать основы свойства flex. Свойство flex указывает длину элемента относительно остальных гибких элементов внутри того же контейнера. Свойство flex является сокращением для свойств flex-grow , flex-shrink и flex-basis . Значение по умолчанию: 0 1 auto; . На мой взгляд, лучший способ полностью понять Flexbox — поиграть с различными значениями и посмотреть, что получится.

Свойство flex-grow элемента flex указывает, сколько места внутри контейнера flex должен занимать элемент.

Свойство flex-shrink указывает, как элемент будет сжиматься по отношению к остальным гибким элементам внутри того же контейнера.

Свойство flex-basis указывает начальный основной размер гибкого элемента. Это свойство определяет размер блока содержимого, если не указано иное с помощью box-sizing. Авто — это значение по умолчанию, когда ширина определяется содержимым, что похоже на width: auto; . Он будет занимать место, определяемое его собственным содержимым. Может быть указанное значение, которое остается верным, как видно из flex-basis: 15em; . Если значение равно 0, все в порядке, потому что элемент не будет расширяться, чтобы заполнить свободное пространство.

Мы начали с display: flex; и justify-content: space-between; и в этот момент все немного непредсказуемо. Flexbox используется, хотя сейчас это не очень очевидно. С этим объявлением каждый из flex-элементов был размещен рядом друг с другом в горизонтальной строке.

Смотрите это на Codepen.

Вам, наверное, интересно, почему каждый из этих гибких элементов имеет разную ширину. Flexbox пытается определить наименьшую ширину по умолчанию для каждого из этих элементов. И из-за разной длины слов и других элементов дизайна вы получаете блоки разного размера. Чтобы добиться согласованного вида, нам нужно проделать еще немного работы. Установка обертки и определение желаемой ширины поможет сделать их однородными карточками.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

По умолчанию все flex-элементы будут пытаться разместиться на одной строке. Добавление flex-wrap: wrap; заставляет элементы заворачиваться друг под друга, потому что по умолчанию используется полная ширина.

Смотрите это на Codepen.

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

Теперь нам нужно добавить класс .card для стилизации наших отдельных карточек. Это может идти прямо под стилями .cards .

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

Помните, что свойство flex является сокращенным: flex-grow равен 0, flex-shrink равен 1, а width равна 24%. Добавляя указанную ширину, мы получаем ряд из четырех строк с некоторым промежутком между ними.

Смотрите это на Codepen.

Мы устанавливаем свойство justify-content для обеспечения интервалов. Первый элемент отображается в крайнем левом углу, второй и третий элементы отображаются в середине, а четвертый элемент отображается в крайнем правом углу. Поскольку ширина карты составляет 24%, остается немного места, так как наши четыре столбца по 24% не составляют в сумме 100%. У нас осталось 4%, если быть точным. Эти 4% распределяются поровну между каждым из предметов. Таким образом, у нас есть примерно 1,33% пространства между картами.

Смотрите это на Codepen.

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

.card {
	flex: 0 1 calc(25% - 1em);
}

Самое классное в этом то, что браузер захватит 25% пространства и удалит из него 1em, что сделает карточки немного меньше.

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

До сих пор мы действительно мало говорили о высоте. Я добавил еще один ряд карточек, чтобы продемонстрировать, как работает высота. Это зависит от того, на какой карточке больше всего контента — высота остальных будет следовать. Поэтому каждая строка содержимого будет иметь одинаковую высоту.

Это очень «уменьшенный» вид, но вы заметите, что первая строка довольно высокая, потому что на второй карточке больше текста, чем на других в этой строке. Во второй строке меньше текста, поэтому в целом она короче.

Карты для небольших устройств

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

Чтобы приступить к решению проблемы, указанные точки останова обеспечат правильное отображение контента на экранах всех типов.

Вот следующие точки останова, которые будут использоваться (вы также можете использовать свои собственные, концепции по-прежнему применимы):

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

До сих пор это были большие размышления. Давайте перейдем к мышлению, ориентированному на мобильные устройства, и начнем с контрольной точки min-width: 40em .

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

С этими изменениями карточки будут отображаться в полноэкранном режиме и располагаться друг под другом на любом экране шириной менее 640 пикселей. Если вы расширите окно браузера до чего-либо выше этого, вернется столбец из четырех. Это имеет смысл, потому что min-width 40em, и именно здесь мы создали ряд из четырех карт.

Чего здесь не хватает, так это середины. Для среднего диапазона более читаемы две карты подряд, а не четыре сплющенные карты. Прежде чем мы вычислим ряд из двух карт, необходимо добавить еще один медиа-запрос для размещения самых больших экранов, которые будут иметь ряд из четырех карт.

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

В новом медиа min-width 60em будут объявлены четыре карты. min-width 40em — это место, где будет объявлен ряд из двух карт. Волшебство происходит со значением flex calc 50% — 1em.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

С этим простым изменением все теперь работает! Уменьшайте и расширяйте окно браузера, чтобы убедиться, что все выглядит правильно.

Смотрите это на Codepen.

Если ваши ряды карт выглядят правильно, то все готово! Если вы пробуете это руководство и у вас получается неровный последний ряд, продолжайте читать.

Динамический контент и последний ряд карточек.

В зависимости от количества карт у вас может быть или не быть глупой последней строки. Если есть полный последний ряд или только одна дополнительная карта, проблем не будет. Иногда вы планируете свой контент заранее, но если контент динамический, последний ряд карточек может вести себя не так, как вы предполагали. Если имеется более одной дополнительной карты и установлено содержимое по ширине, пространство между ними будет ровным и может не совпадать с строками выше.

Чтобы получить такой взгляд, требуется другой способ мышления. Я бы сказал, что это не так эффективно, но относительно просто.

.cards и .card были выполнены вне медиа-запроса:

.cards {
    display: flex;
    flex-wrap: wrap;
 }

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

Медиа-запросы определяют количество карточек:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

Взгляните на Codepen, чтобы увидеть модифицированное решение.

Надеюсь, это даст вам базовый обзор концепций Flexbox, который поможет вам начать работу. Flexbox имеет довольно хорошую поддержку браузеров, и макеты карточек будут по-прежнему использоваться в дизайне веб-сайтов. И помните, макеты карт — это только начало того, как вы можете использовать Flexbox.

Далее: Создавайте сайты WordPress быстрее

В этом руководстве мы дадим советы о том, как работать быстрее и ускорить рабочий процесс WordPress. От первоначальной настройки сайта до его запуска — узнайте, как вы можете сократить время своей повседневной работы!

Загрузите бесплатное руководство здесь!

Что еще вы создали с помощью Flexbox? Делитесь своими проектами в комментариях!