Подкаст CSS – 009: Макет
Представьте, что вы работаете разработчиком, и коллега-дизайнер вручает вам дизайн нового веб-сайта. В дизайне есть множество интересных макетов и композиций: двумерные макеты, учитывающие ширину и высоту области просмотра, а также макеты, которые должны быть плавными и гибкими. Как вы решаете, как лучше всего стилизовать их с помощью CSS?
CSS предоставляет нам различные способы решения проблем с макетом по горизонтальной, вертикальной оси или даже по обеим. Выбор правильного метода макета для контекста может быть трудным, и часто для решения вашей проблемы может потребоваться более одного метода макета. Чтобы помочь в этом, в следующих модулях вы узнаете об уникальных особенностях каждого механизма макета CSS, которые помогут принять правильные решения.
Макет: краткая история
На заре Интернета проекты, более сложные, чем простой документ, компоновались с элементами <table>
. Отделение HTML от визуальных стилей стало проще, когда в конце 90-х годов в браузерах широко распространился CSS. CSS открыл перед разработчиками возможность полностью изменить внешний вид веб-сайта, даже не затрагивая HTML. Эта новая возможность вдохновила такие проекты, как The CSS Zen Garden , который был создан, чтобы продемонстрировать возможности CSS и побудить больше разработчиков изучить его.
CSS развивался по мере развития наших потребностей в веб-дизайне и браузерных технологиях. Вы можете прочитать, как макет CSS и наш подход к макету развивались с течением времени, в этой статье Рэйчел Эндрю .
Планировка: настоящее и будущее
Современный CSS обладает исключительно мощными инструментами верстки. У нас есть специальные системы для макетирования, и мы собираемся высокоуровнево рассмотреть то, что у нас есть в распоряжении, прежде чем углубляться в более подробную информацию о Flexbox и Grid в следующих модулях.
Понимание свойства display
Свойство display
выполняет две функции. Первое, что он делает, это определяет, действует ли блок, к которому он применяется, как встроенный или блочный.
.my-element {
display: inline;
}
Строковые элементы ведут себя как слова в предложении. Они сидят рядом друг с другом в линейном направлении. Такие элементы, как <span>
и <strong>
, которые обычно используются для стилизации фрагментов текста внутри содержащихся элементов, таких как <p>
(абзац), по умолчанию являются встроенными. Они также сохраняют окружающее пробелы.
Вы не можете явно указать ширину и высоту для встроенных элементов. Любые поля и отступы на уровне блока будут игнорироваться окружающими элементами.
.my-element {
display: block;
}
Блочные элементы не располагаются рядом друг с другом. Они создают для себя новую линию. Если это не изменено другим кодом CSS, блочный элемент будет расширяться до размера встроенного измерения, то есть охватывая всю ширину в режиме горизонтального письма. Отступы со всех сторон блочного элемента будут соблюдены.
.my-element {
display: flex;
}
Свойство display
также определяет, как должны вести себя дочерние элементы элемента. Например, установка свойства display
на display: flex
делает блок блоком уровня блока, а также преобразует его дочерние элементы в flex-элементы. Это активирует гибкие свойства, которые управляют выравниванием, порядком и потоком.
Флексбокс и сетка
Существует два основных механизма макета, которые создают правила макета для нескольких элементов: flexbox и Grid . Они имеют общие черты, но предназначены для решения различных проблем компоновки.
Флексбокс
.my-element {
display: flex;
}
Flexbox — это механизм для одномерных макетов. Расположение по одной оси, горизонтально или вертикально. По умолчанию flexbox выравнивает дочерние элементы элемента рядом друг с другом в линейном направлении и растягивает их в направлении блока, чтобы все они имели одинаковую высоту.
Элементы останутся на одной оси и не будут перенесены, когда им не хватит места. Вместо этого они попытаются втиснуться в одну линию друг с другом. Это поведение можно изменить с помощью свойств align-items
, justify-content
и flex-wrap
.
Flexbox также преобразует дочерние элементы в гибкие элементы , что означает, что вы можете писать правила их поведения внутри гибкого контейнера. Вы можете изменить выравнивание, порядок и выравнивание отдельного элемента. Вы также можете изменить способ его сжатия или увеличения, используя свойство flex
.
.my-element div {
flex: 1 0 auto;
}
Свойство flex
— это сокращение от flex-grow
, flex-shrink
и flex-basis
. Вы можете расширить приведенный выше пример следующим образом:
.my-element div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
Разработчики предоставляют эти низкоуровневые правила, чтобы подсказать браузеру, как должен вести себя макет, когда ему мешают размеры содержимого и области просмотра. Это делает его очень полезным механизмом для адаптивного веб-дизайна.
Сетка
.my-element {
display: grid;
}
Grid во многом похож на flexbox , но он предназначен для управления многоосными макетами вместо одноосных (вертикальное или горизонтальное пространство).
Grid позволяет вам писать правила макета для элемента, имеющего display: grid
, и вводит несколько новых примитивов для стилизации макета, таких как функции repeat()
и minmax()
. Одной из полезных единиц сетки является единица fr
, которая представляет собой долю оставшегося пространства. Вы можете построить традиционные сетки из 12 столбцов с промежутком между каждым элементом, используя 3 свойства CSS:
.my-element {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
В приведенном выше примере показан макет с одной осью. В то время как flexbox в основном рассматривает элементы как группу, сетка дает вам точный контроль над их размещением в двух измерениях. Мы могли бы определить, что первый элемент в этой сетке занимает 2 строки и 3 столбца:
.my-element :first-child {
grid-row: 1/3;
grid-column: 1/4;
}
Свойства grid-row
и grid-column
предписывают первому элементу сетки перейти к началу четвертого столбца от первого столбца, а затем перейти к третьей строке от первой строки.
Расположение потока
Если вы не используете сетку или флексбокс, ваши элементы отображаются в обычном режиме. Существует ряд методов макета, которые можно использовать для настройки поведения и положения элементов в обычном потоке.
Встроенный блок
Помните, как окружающие элементы не учитывают поля и отступы блока встроенного элемента? С помощью inline-block
вы можете добиться этого.
p span {
display: inline-block;
}
Использование inline-block
дает вам блок, который имеет некоторые характеристики элемента уровня блока, но при этом располагается внутри текста.
p span {
margin-top: 0.5rem;
}
Плавает
Если у вас есть изображение, которое находится внутри абзаца текста, не было бы удобно, чтобы этот текст обтекал это изображение, как вы можете видеть в газете? Вы можете сделать это с помощью поплавков.
img {
float: left;
margin-right: 1em;
}
Свойство float
указывает элементу «плавать» в указанном направлении. Изображение в этом примере получает указание перемещаться влево, что затем позволяет однородным элементам «обтекать» его. Вы можете указать элементу перемещаться left
, right
или inherit
.
Многоколоночный макет
Если у вас очень длинный список элементов, например список всех стран мира, это может привести к тому, что пользователю придется долго прокручивать страницу и тратить время. Это также может привести к появлению лишних пробелов на странице. С помощью CSS multicolumn вы можете разделить это на несколько столбцов, чтобы решить обе эти проблемы.
<h1>All countries</h1>
<ul class="countries">
<li>Argentina</li>
<li>Aland Islands</li>
<li>Albania</li>
<li>Algeria</li>
<li>American Samoa</li>
<li>Andorra</li>
…
</ul>
.countries {
column-count: 2;
column-gap: 1em;
}
Это автоматически разбивает этот длинный список на два столбца и добавляет пробел между двумя столбцами.
.countries {
width: 100%;
column-width: 260px;
column-gap: 1em;
}
Вместо установки количества столбцов, на которые разбит контент, вы также можете определить минимальную желаемую ширину, используя column-width
. По мере того, как в области просмотра становится доступно больше места, автоматически создается больше столбцов, а по мере уменьшения пространства столбцы также уменьшаются. Это очень полезно в контексте адаптивного веб-дизайна.
Позиционирование
Последним в этом обзоре механизмов компоновки является позиционирование. Свойство position
изменяет поведение элемента в обычном потоке документа и его отношение к другим элементам. Доступные параметры: relative
, absolute
, fixed
и sticky
значение по умолчанию — static
.
.my-element {
position: relative;
top: 10px;
}
Этот элемент смещается на 10 пикселей вниз в зависимости от его текущего положения в документе, поскольку он расположен относительно самого себя. Добавление position: relative
элемента также делает его содержащим блоком любых дочерних элементов с position: absolute
. Это означает, что его дочерний элемент теперь будет перемещен к этому конкретному элементу, а не к самому верхнему относительному родительскому элементу, когда к нему применена абсолютная позиция.
.my-element {
position: relative;
width: 100px;
height: 100px;
}
.another-element {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
}
Когда вы устанавливаете для position
absolute
, элемент выводится из текущего потока документов. Это означает две вещи:
- Вы можете расположить этот элемент где угодно, используя
top
,right
,bottom
иleft
в его ближайшем относительном родительском элементе. - Все содержимое, окружающее абсолютный элемент, перекомпоновывается, чтобы заполнить оставшееся пространство, оставленное этим элементом.
Элемент со значением position
« fixed
ведет себя аналогично « absolute
, причем его родительским элементом является корневой элемент <html>
. Элементы с фиксированным положением остаются привязанными к левому верхнему углу в зависимости от установленных вами значений top
, right
, bottom
и left
.
Вы можете добиться закрепленных, фиксированных аспектов fixed
и более предсказуемых аспектов relative
потока документов с помощью sticky
. При этом значении, когда область просмотра прокручивается мимо элемента, он остается привязанным к top
, right
, bottom
и left
значениям, которые вы установили.
Заворачивать
CSS-разметка предоставляет большой выбор и гибкость. Чтобы глубже погрузиться в возможности CSS Flexbox и Grid , перейдите к следующим нескольким модулям.
Проверьте свое понимание
Проверьте свои знания верстки
Какие две вещи делает свойство display
?
inline
или block
или none
.Какое свойство CSS лучше всего подходит для объединения нескольких абзацев в столбцы?
column-count
float
display: grid
display: flex
Что означает, если блок вышел из потока?
top
или left
позиции.Flexbox и Grid по умолчанию оборачивают своих дочерних элементов?