В этом посте освещаются несколько мощных строк CSS, которые выполняют серьезную тяжелую работу и помогают создавать надежные современные макеты.
Современные макеты CSS позволяют разработчикам писать действительно содержательные и надежные правила оформления всего несколькими нажатиями клавиш. В докладе выше и в следующем посте рассматриваются 10 мощных строк CSS, которые выполняют серьезную тяжелую работу.
Чтобы следить за этими демоверсиями или поиграть с ними самостоятельно, воспользуйтесь вставкой Glitch выше или посетите 1linelayouts.glitch.me .
01. Суперцентрирование: place-items: center
Для первого «однострочного» макета давайте разгадаем самую большую загадку в области CSS: центрирование элементов. Я хочу, чтобы вы знали, что с place-items: center проще, чем вы думаете.
Сначала укажите grid в качестве метода display , а затем напишите place-items: center на том же элементе. place-items — это сокращение для одновременной установки align-items и justify-items . Если установить его в center , то и align-items , и justify-items будут установлены в center .
.parent {
display: grid;
place-items: center;
}
Это позволяет контенту быть идеально центрированным внутри родительского элемента, независимо от внутреннего размера.
02. Деконструированный блин: flex: <grow> <shrink> <baseWidth>
Далее у нас есть деконструированный блин! Например, это обычный макет для маркетинговых сайтов, который может состоять из трех элементов в ряд, обычно с изображением, заголовком и текстом, описывающим некоторые особенности продукта. На мобильных устройствах мы хотим, чтобы они красиво располагались друг на друге и расширялись по мере увеличения размера экрана.
Используя Flexbox для этого эффекта, вам не понадобятся медиа-запросы для настройки размещения этих элементов при изменении размера экрана.
Сокращение flex означает: flex: <flex-grow> <flex-shrink> <flex-basis> .
По этой причине, если вы хотите, чтобы ваши блоки заполнялись до размера <flex-basis> , сжимались до меньших размеров, но не растягивались для заполнения дополнительного пространства, напишите: flex: 0 1 <flex-basis> . В данном случае ваш <flex-basis> имеет 150px , поэтому он выглядит так:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Если вы хотите , чтобы поля растягивались и заполняли пространство при переходе на следующую строку, установите для <flex-grow> значение 1 , чтобы это выглядело так:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Теперь, когда вы увеличиваете или уменьшаете размер экрана, эти гибкие элементы одновременно сжимаются и увеличиваются.
03. На боковой панели написано: grid-template-columns: minmax(<min>, <max>) …)
В этой демонстрации используется функция minmax для макетов сетки. Здесь мы устанавливаем минимальный размер боковой панели равным 150px , но на больших экранах увеличиваем его до 25% . Боковая панель всегда будет занимать 25% горизонтального пространства родительского элемента, пока эти 25% не станут меньше 150px .
Добавьте это как значение Grid-template-columns со следующим значением: minmax(150px, 25%) 1fr . Элемент в первом столбце (в данном случае боковая панель) получает minmax 150px при 25% , а второй элемент (здесь main раздел) занимает остальную часть пространства в виде одной дорожки 1fr .
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Стек блинов: grid-template-rows: auto 1fr auto
В отличие от Deconstructed Pancake, этот пример не переносит дочерние элементы при изменении размера экрана. Этот макет, обычно называемый липким нижним колонтитулом , часто используется как для веб-сайтов, так и для приложений, в мобильных приложениях (нижний колонтитул обычно представляет собой панель инструментов) и веб-сайтах (одностраничные приложения часто используют этот глобальный макет).
Добавление display: grid к компоненту даст вам сетку из одного столбца, однако основная область будет такой же высоты, как и содержимое с нижним колонтитулом под ним.
Чтобы нижний колонтитул прилипал к низу, добавьте:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Это устанавливает, что содержимое верхнего и нижнего колонтитула автоматически принимает размер своих дочерних элементов, и применяет оставшееся пространство ( 1fr ) к основной области, в то время как строка auto размером будет принимать размер минимального содержимого своих дочерних элементов, так что это содержимое увеличивается в размерах, сама строка будет расти, чтобы приспособиться.
05. Классический макет Святого Грааля: grid-template: auto 1fr auto / auto 1fr auto
В этом классическом макете Святого Грааля есть заголовок, нижний колонтитул, левая боковая панель, правая боковая панель и основной контент. Он похож на предыдущий макет, но теперь с боковыми панелями!
Чтобы написать всю эту сетку с помощью одной строки кода, используйте свойство grid-template . Это позволяет вам одновременно устанавливать как строки, так и столбцы.
Пара свойства и значения: grid-template: auto 1fr auto / auto 1fr auto . Косая черта между первым и вторым списками, разделенными пробелами, представляет собой разрыв между строками и столбцами.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Как и в последнем примере, где верхний и нижний колонтитулы имели содержимое с автоматическим размером, здесь размер левой и правой боковой панели автоматически изменяется в зависимости от внутреннего размера их дочерних элементов. Однако на этот раз это горизонтальный размер (ширина), а не вертикальный (высота).
06. Сетка из 12 пролетов: grid-template-columns: repeat(12, 1fr)
Далее у нас есть еще одна классика: сетка из 12 пролетов. Вы можете быстро писать сетки в CSS с помощью функции repeat() . Использование: repeat(12, 1fr); для столбцов шаблона сетки дает 12 столбцов каждый из 1fr .
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Теперь у вас есть сетка дорожек из 12 столбцов, и мы можем разместить в ней наших дочерних элементов. Один из способов сделать это — разместить их с помощью линий сетки. Например, grid-column: 1 / 13 будет охватывать весь путь от первой строки до последней (13-й) и охватывать 12 столбцов. grid-column: 1 / 5; будет охватывать первые четыре.
Другой способ записать это — использовать ключевое слово span . С помощью span вы устанавливаете начальную строку, а затем количество столбцов, которые будут охватываться от этой начальной точки. В этом случае grid-column: 1 / span 12 будет эквивалентен grid-column: 1 / 13 , а grid-column: 2 / span 6 будет эквивалентен grid-column: 2 / 8 .
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Повтор, Авто, МинМакс): grid-template-columns(auto-fit, minmax(<base>, 1fr))
В этом седьмом примере объедините некоторые концепции, о которых вы уже узнали, чтобы создать адаптивный макет с автоматически размещаемыми и гибкими дочерними элементами. Довольно аккуратно. Ключевые термины, которые здесь следует запомнить, — это repeat , auto-(fit|fill) и minmax()' , которые вы помните под аббревиатурой RAM.
Все вместе это выглядит так:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Вы снова используете повтор, но на этот раз используя ключевое слово auto-fit вместо явного числового значения. Это позволяет автоматически размещать дочерние элементы. Эти дочерние элементы также имеют базовое минимальное значение 150px с максимальным значением 1fr , что означает, что на меньших экранах они будут занимать всю ширину 1fr , и когда они достигнут ширины 150px каждый, они начнут перетекать в одну и ту же строку.
При auto-fit поля будут растягиваться, если их размер по горизонтали превысит 150 пикселей, чтобы заполнить все оставшееся пространство. Однако если вы измените это значение на auto-fill , они не будут растягиваться при превышении их базового размера в функции minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Состав: justify-content: space-between
В следующем макете основной момент, который нужно продемонстрировать, — это justify-content: space-between , который размещает первый и последний дочерние элементы по краям их ограничивающего прямоугольника, а оставшееся пространство равномерно распределяется между элементами. Для этих карточек они помещаются в режим отображения Flexbox, при этом направление столбца устанавливается с помощью flex-direction: column .
При этом заголовок, описание и блок изображения помещаются в вертикальный столбец внутри родительской карточки. Затем применение justify-content: space-between привязывает первый (заголовок) и последний (блок изображения) элементы к краям флексбокса, а описательный текст между ними размещается с равным интервалом до каждой конечной точки.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Зажим моего стиля: clamp(<min>, <actual>, <max>)
Здесь мы рассмотрим некоторые методы, которые меньше поддерживаются браузерами , но имеют действительно интересные последствия для макетов и адаптивного дизайна пользовательского интерфейса. В этой демонстрации вы устанавливаете ширину с помощью зажима следующим образом: width: clamp(<min>, <actual>, <max>) .
Это устанавливает абсолютный минимальный и максимальный размер, а также фактический размер. Со значениями это может выглядеть так:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Минимальный размер здесь составляет 23ch или 23 символа, а максимальный размер — 46ch , 46 символов. Единицы ширины символов основаны на размере шрифта элемента (в частности, на ширине 0 глифа). «Фактический» размер составляет 50 %, что соответствует 50 % ширины родительского элемента.
Здесь функция clamp() позволяет этому элементу сохранять ширину 50% до тех пор , пока 50% не станет больше 46ch (на более широких окнах просмотра) или меньше 23ch (на меньших окнах просмотра). Вы можете видеть, что когда я растягиваю и уменьшаю родительский размер, ширина этой карты увеличивается до зафиксированной максимальной точки и уменьшается до зафиксированного минимума. Затем он остается по центру родительского элемента, поскольку мы применили дополнительные свойства для его центрирования. Это обеспечивает более разборчивость макетов, поскольку текст не будет слишком широким (более 46ch ) или слишком сжатым и узким (менее 23ch ).
Это также отличный способ реализовать адаптивную типографику. Например, вы можете написать: font-size: clamp(1.5rem, 20vw, 3rem) . В этом случае размер шрифта заголовка всегда будет оставаться в пределах от 1.5rem до 3rem , но будет увеличиваться и уменьшаться в зависимости от фактического значения 20vw , чтобы соответствовать ширине области просмотра.
Это отличный способ обеспечить читаемость с помощью минимального и максимального значения размера, но помните, что он поддерживается не всеми современными браузерами, поэтому убедитесь, что у вас есть запасные варианты, и проведите тестирование.
10. Соблюдение формата: aspect-ratio: <width> / <height>
И, наконец, этот последний инструмент макетирования — самый экспериментальный из всех. Недавно он был представлен в Chrome Canary в Chromium 84, и Firefox активно работает над его реализацией, но в настоящее время его нет ни в одной стабильной версии браузера.
Однако я хочу упомянуть об этом, потому что это довольно часто встречающаяся проблема. И это просто сохранение соотношения сторон изображения.
Благодаря свойству aspect-ratio , когда я изменяю размер карты, зеленый визуальный блок сохраняет это соотношение сторон 16 x 9. Мы соблюдаем соотношение сторон aspect-ratio: 16 / 9 .
.video {
aspect-ratio: 16 / 9;
}
Чтобы поддерживать соотношение сторон 16 x 9 без этого свойства, вам нужно будет использовать трюк padding-top и задать ему отступ 56.25% , чтобы установить соотношение верха и ширины. Скоро у нас появится свойство для этого, чтобы избежать взлома и необходимости рассчитывать проценты. Вы можете создать квадрат с соотношением 1 / 1 , соотношением 2 к 1 с 2 / 1 и вообще все, что вам нужно, чтобы это изображение масштабировалось с заданным соотношением размеров.
.square {
aspect-ratio: 1 / 1;
}
Хотя эта функция все еще развивается, о ней полезно знать, поскольку она решает множество разногласий разработчиков, с которыми я сам много раз сталкивался, особенно когда дело касается видео и iframe.
Заключение
Благодарим вас за то, что вы прошли через это путешествие по 10 мощным направлениям CSS. Чтобы узнать больше, посмотрите полное видео и опробуйте демо-версии самостоятельно.