Подкаст 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 .overflow .Какое свойство CSS лучше всего подходит для объединения нескольких абзацев в столбцы?
display: gridcolumn-countdisplay: flexfloatЧто означает, если блок вышел из потока?
top или left позиции.position: absolute теперь позиционируется по координатам x и y на основе содержащего его блока, а не его порядка с другими родственными элементами.Flexbox и Grid по умолчанию оборачивают своих дочерних элементов?
flex-wrap: wrap repeat(auto-fit, 30ch) .