Макет

Подкаст 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 , элемент выводится из текущего потока документов. Это означает две вещи:

1. Вы можете расположить этот элемент где угодно, используя top , right , bottom и left в его ближайшем относительном родительском элементе.
2. Все содержимое, окружающее абсолютный элемент, перекомпоновывается, чтобы заполнить оставшееся пространство, оставленное этим элементом.

Элемент со значением position « fixed ведет себя аналогично « absolute , причем его родительским элементом является корневой элемент <html> . Элементы с фиксированным положением остаются привязанными к левому верхнему углу в зависимости от установленных вами значений top , right , bottom и left .

Вы можете добиться закрепленных, фиксированных аспектов fixed и более предсказуемых аспектов relative потока документов с помощью sticky . При этом значении, когда область просмотра прокручивается мимо элемента, он остается привязанным к top , right , bottom и left значениям, которые вы установили.

Заворачивать

CSS-разметка предоставляет большой выбор и гибкость. Чтобы глубже погрузиться в возможности CSS Flexbox и Grid , перейдите к следующим нескольким модулям.

Проверьте свое понимание

Проверьте свои знания верстки