CSS Flexbox: Больше возможностей для оформления веб-страницы

С помощью каскадных таблиц стилей (CSS) можно создавать более привлекательные веб-сайты. В то время как HTML содержит только самые важные базовые элементы, с помощью CSS можно реализовать сложный веб-дизайн, вставляя изображения более привлекательным образом, располагая тексты и интегрируя элементы, которые выделяются на сайте. Полезный язык разметки продолжает совершенствоваться, чтобы упростить задачи веб-дизайна и предоставить новые варианты оформления. CSS Flexbox является одним из примеров такого постоянного развития и быстро стал важным инструментом для разумного веб-дизайна в эпоху мобильных устройств.

Для чего используется CSS Flexbox?

Одной из основных задач CSS является объединение всех элементов веб-сайта в макет. Текст, изображения и кнопки могут быть аккуратно расположены. Дизайнеры могут указать — вплоть до каждого пикселя — где каждый элемент должен появиться на экране. Однако это работает правильно, только если известны размер экрана и соотношение сторон. Мобильные технологии представляют здесь проблему, поскольку размеры экрана и соотношение сторон зависят от смартфона или планшетного устройства. CSS слишком негибок для достижения убедительного результата.

Flexbox (а точнее: CSS Flexible Box layout) функционирует более разумно и динамично. Макет гибко и динамично подстраивается под используемый дисплей. Пространство заполняется или элементы сдвигаются ближе друг к другу, чтобы каждый элемент веб-страницы оставался на виду. Для того чтобы это работало без нарушения желаемого макета, Flexbox использует две оси. Главная ось обычно проходит горизонтально; поперечная ось проходит вертикально. С помощью этих осей элементы могут быть расположены внутри коробки. Таким образом, элементы могут быть распределены относительно друг друга. CSS Flexbox также обеспечивает разумное заполнение пространства вокруг этих элементов.

Учебник по Flexbox: Первые шаги с новой технологией

Всем, кто сегодня занимается разработкой веб-сайтов, стоит обратить внимание на CSS Flexbox, поскольку эта технология значительно облегчает работу с различными размерами экрана. Функция структурирована таким образом, что можно получить привлекательные результаты, используя всего несколько строк кода.

Примечание

Еще одно новшество, появившееся в CSS3, называется CSS Grid. Эта технология предоставляет веб-дизайнерам дополнительные возможности для распределения объектов на экране.

Основы CSS Flexbox

В основе Flexbox лежит контейнер (flex container), в котором размещается несколько элементов (flex items). Контейнер придает свои свойства элементам — другими словами, элементы и являются собственно флексбоксами, которые сохраняют свою гибкость, находясь внутри контейнера.

Обе оси имеют направление: обычно главная ось проходит слева направо, поперечная — сверху вниз. Flexbox описывается как одномерная система: элементы могут быть расположены либо в строках, либо в колонках. Комбинация не предусмотрена. Если выбрать, например, линейное расположение (что также является стандартом), CSS Flexbox попытается расположить все элементы последовательно. Этому также можно воспрепятствовать и в некотором смысле принудительно сделать разрыв строки.

Примечание

В следующем примере мы записываем код CSS непосредственно в шапку HTML-документа. Однако вместо этого вы можете создать отдельный файл таблицы стилей и вставить его над заголовком.

Создание и расположение элементов

Прежде чем приступить к расположению элементов, необходимо сначала создать их с помощью HTML:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="flex-container">
  <div class="flex-item">Box 1</div>
  <div class="flex-item">Box 2</div>
  <div class="flex-item">Box 3</div> 
</div>

</body>
</html>

Таким образом, три элемента будут отображаться друг под другом. Используя CSS, мы можем теперь распределить термины по главной оси:

<style>
.flex-container {
  display: flex;
  background-color: grey;
}

.flex-item {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}
</style>

Контейнер в этой таблице стилей был определен в самом начале. Команда «display: flex;» включает Flexbox. Элементы распределены слева направо, так как мы не определяли их по-другому. Однако для изменения распределения можно задать пять различных параметров с помощью команды «justify-content»:

  • flex-start: left-justified
  • flex-end: выравнивание по правому краю
  • center: по центру
  • space-around: равномерно распределяет пространство вокруг боксов
  • space-between: равномерно распределяет пространство между ячейками

Остальной код носит лишь косметический характер и не имеет никакого отношения к реальным Flexbox.

При использовании Flexbox, CSS исходит из горизонтального выравнивания. Однако можно расположить элементы и в столбик. Кроме того, можно изменить направление — слева направо или снизу вверх. Для этого используется команда «flex-direction»:

  • ряд: слева направо
  • строка-обратно: справа налево
  • столбец: сверху вниз
  • столбец: снизу вверх

В то же время команда «justify-content: flex-end;» означает не то же самое, что «flex-direction: row-reverse;». При использовании первого варианта последний элемент помещается справа, в то время как второй вариант меняет порядок. Таким образом, первый элемент в коде окажется справа.

Группировка элементов

До сих пор мы распределяли флексбоксы поровну. Однако если вы предпочитаете не обрабатывать все объекты одновременно, вы можете объединить элементы в HTML-текст. Это полезно, если, например, текст нужно отобразить иначе, чем изображение:

<div class="flex-container">
  <div class="flex-item">Box 1</div>
  <div class="flex-item">
    <div class="flex-item">Box 2</div>
    <div class="flex-item">Box 3</div>
  </div>
</div>

Вертикальное перемещение

Используя «justify-content», элементы можно расположить в определенных отношениях друг с другом, кроме как на горизонтальной оси. Если необходимо переместить содержимое сверху вниз (по поперечной оси), необходимо использовать команду «align-items». Существует пять различных вариантов:

  • center: объекты выравниваются по центру
  • flex-start: объекты выравниваются по верхнему краю
  • flex-end: объекты выравниваются по нижнему полю
  • растянуть: объекты вытягиваются до одинакового размера
  • baseline: объекты располагаются по базовой линии (зависит от содержимого).

Опции «flex-start» и «baseline» на первый взгляд дают одинаковый результат. Разница появляется, когда объекты вложены друг в друга. Если «flex-start» связывает вместе только те два Flexbox, которые находятся на одном уровне иерархии, то «baseline» учитывает также содержимое боксов.

С помощью следующего кода вы можете расположить три объекта разных размеров так, чтобы они находились по центру рядом друг с другом:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: grey;
  justify-content: center;
  align-items: center;
}

.flex-item1 {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}
.flex-item2 {
  background-color: blue;
  width: auto;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}
.flex-item3 {
  background-color: grey;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
</style>

</head>
<body>

<div class="flex-container">
  <div class="flex-item1">Box 1</div>
  <div class="flex-item2">
    <div class="flex-item3">Box a</div>
    <div class="flex-item3">Box b</div>
  </div>
  <div class="flex-item1">Box 2</div>
</div>

</body>
</html>

На вертикальный разброс можно также повлиять с помощью переноса строки. Если в контейнер поместить много объектов, то они всегда будут продолжать двигаться по горизонтали, так что пользователю придется прокручивать страницу, и так что реальный экран, который был предоставлен, будет заброшен. С помощью «flex-wrap» можно обеспечить правильное распределение элементов по нескольким строкам.

  • nowrap: без переноса строки
  • обернуть: разрыв строки
  • wrap-reverse: разрыв строки (с расположением в обратном порядке)
.flex-container {
  display: flex;
  background-color: grey;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap-reverse;
}

Перемещение отдельного флексбокса

До сих пор расположение всегда применялось ко всему контейнеру. Все боксы внутри контейнера подчиняются глобальной команде. Это облегчает работу, но в то же время ограничивает. Вот почему CSS Flexbox предоставляет веб-дизайнерам возможность определять исключения с помощью «порядка». Стандартное значение (если оно не определено специально) — 0. Значение порядка добавляет объект в абстрактную группу. Все элементы, которые мы создали до сих пор, принадлежат к одной группе, так как все имеют значение 0. Исходя из этого значения, отдельные объекты можно перемещать только вперед (-1) или назад (1).

Поэтому, если вы добавите значение 1 одному выбранному объекту, он будет отображаться только после других элементов, которые были оставлены на 0. Но вы можете присвоить другие (более высокие или низкие) значения. Это вопрос визуального представления: логический результат (в соответствии с HTML-документом) остается неизменным.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: grey;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flex-item1 {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}
.flex-item2 {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
  order: -1;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item1">Box 1</div>
  <div class="flex-item2">Box 2 </div>
  <div class="flex-item1">Box 3</div>

</div>

</body>
</html>

Гибкие размеры элементов

До сих пор мы рассматривали только гибкое расположение объектов. Соотношения размеров в примере кода регулировались с помощью классического CSS. Флексбоксы, однако, регулируются в отношении их размера. Для этого используется команда «flex». Подобно упорядочиванию, элементы можно разделить на группы. Чем больше значение, тем больше места требует соответствующий элемент.

.flex-container {
  display: flex;
  background-color: grey;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flex-item1 {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
}
.flex-item2 {
  background-color: white;
  width: 200px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
  flex: 1;
}

С помощью команды «flex» фактически используется сокращенная форма. Эта команда содержит всего три конфигурации: «flex-grow», «flex-shrink» и «flex-basis». Таким образом, можно ввести отдельные значения непосредственно в форму сокращения (flex: <flex-grow> <flex-shrink> <flex-basis> / flex: 1 1 20em) или выбрать отдельное значение и оставить конфигурацию на усмотрение CSS.

Факт

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

Оцените статью
cdelat.ru
Добавить комментарий