Взаимосвязь гибких боксов с другими методами макетирования

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

Модуль выравнивания блоков

Многие люди в первую очередь обращаются к гибким боксам, когда хотят правильно выровнять элементы гибкого контейнера внутри него. Гибкие боксы предоставляют доступ к свойствам, позволяющим выравнивать элементы по поперечной оси и выравнивать элементы по основной оси.

Гибкие боксы изначально были определены в собственном модуле макета гибких боксов, но свойства и значения, общие для других методов макетирования, определены в модуле выравнивания блоков CSS. Этот модуль описывает, как работают выравнивание, выравнивание по краю, интервалы и отступы во всех системах макета — а не только в гибких боксах. Если функция определена в обеих спецификациях, обратите внимание, что модуль выравнивания блоков имеет приоритет над модулем макета гибких боксов.

Режимы записи

В статье Основные понятия гибких боксов отмечается, что гибкие боксы ориентированы на режим записи. Режимы записи подробно описаны в модуле Режимов записи CSS, который описывает, как CSS поддерживает различные режимы записи, используемые в разных странах. Нам нужно учитывать, как это повлияет на наши макеты с гибкими боксами, так как режим записи изменяет направление выкладки блоков в документе. Понимание направлений блока и строки является ключевым для новых методов макетирования.

Стоит отметить, что мы можем захотеть изменить режим записи нашего документа по причинам, отличным от публикации контента на языке, использующем другой режим записи. Модуль режимов записи CSS определяет, как текст может быть написан по горизонтали, слева направо и справа налево, и по вертикали, сверху вниз. Это важно для интернационализации и переводов, но эти функции также могут использоваться для креативного дизайна.

Режимы записи

Спецификация режимов записи определяет следующие значения свойства writing-mode, которые служат для изменения направления выкладки блоков на странице, соответствующего направлению выкладки блоков при форматировании контента в данном режиме записи. Вы можете изменить пример ниже на эти режимы, чтобы увидеть, что происходит с макетом гибких боксов.

horizontal-tb
vertical-rl
vertical-lr
sideways-rl
sideways-lr

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  width: 500px;
  border: 2px dotted rgb(96 139 168);
  display: flex;
  writing-mode: horizontal-tb;
}

sideways-rl и sideways-lr в настоящее время поддерживаются только в Firefox.

Обратите внимание, что обычно вы не будете использовать CSS и свойство writing-mode для изменения всего документа на другой режим записи. Это делается с помощью HTML, добавив атрибут dir и lang к элементу <html>, чтобы указать язык документа и стандартное направление текста. Это означает, что документ будет отображаться правильно, даже если CSS не загрузится.

Гибкие боксы и другие методы макетирования

Некоторые свойства были разработаны, предполагая, что контент выкладывается с использованием стандартной системы макета блоков, и не применяются в контексте макета гибких боксов. Элемент, установленный в display: flex, во многих отношениях ведет себя как любой другой блочный контейнер, который устанавливает содержащий блок. Перекрытия не будут нарушать, а отступы контейнеров не будут сливаться.

Что касается элементов гибких боксов, если элемент был смещен или очищен, а затем стал элементом гибких боксов из-за того, что у родительского элемента применено display: flex, смещение и очистка больше не будут происходить, и элемент не будет выведен из обычного потока так, как это происходит со смещениями. Если вы использовали свойство vertical-align, как используется с inline-block или табличным макетом для выравнивания, это больше не будет влиять на элемент, и вы можете использовать свойства выравнивания гибких боксов вместо этого.

В следующем примере дочерние элементы были смещены, а затем у их контейнера был добавлен display: flex. Если вы удалите display: flex, вы увидите, что элемент .box схлопнется, так как у нас нет очищения. Это демонстрирует, что происходит смещение. Если снова применить display: flex, схлопывания не будет. Это потому, что у элементов больше нет смещения, так как они были преобразованы в элементы гибких боксов.

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.box {
  width: 500px;
  border: 2px dotted rgb(96 139 168);
  display: flex;
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  float: left;
}

Гибкие боксы и макет сетки

Макет CSS сетки и гибкие боксы имеют много общих свойств и значений. Для различных свойств, если элемент гибкого бокса становится элементом сетки, любые flex значения, назначенные дочерним элементам, такие как flex-end, будут игнорироваться. Как отмечалось выше, значения, определённые в модуле выравнивания блоков, работающие в обоих методах макетирования, имеют приоритет над значениями, определёнными только для гибких боксов.

Гибкие боксы и сетка — в чем разница?

Часто задают вопрос о различии между гибкими боксами и макетом CSS сетки — почему у нас есть две спецификации, которые иногда кажутся одинаковыми?

Самый простой ответ на этот вопрос определяется самими спецификациями. Гибкие боксы — это одномерный метод макетирования, а макет сетки — двумерный. В примере ниже используется макет гибких боксов. Как уже описано в статье Основные понятия, элементы гибких боксов могут быть выложены по новой строке, но, когда они это делают, каждая строка ведет себя так, как будто это собственный контейнер гибких боксов. При распределении пространства гибкие боксы не учитывают расположение элементов в других строках и не пытаются выровнять их друг с другом.

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  flex-wrap: wrap;
  padding: 1em;
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 1em;
  flex: 1 1 200px;
}

Если мы создадим очень похожий макет с сеткой, мы сможем контролировать макет и по строкам, и по столбцам.

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

.box {
  border: 2px dotted rgb(96 139 168);
  padding: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto));
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  padding: 1em;
  background-color: rgb(96 139 168 / 0.2);
}

Эти примеры указывают на еще одно ключевое различие между этими методами макетирования. В макете сетки вы в основном задаете размеры контейнера, создавая дорожки и помещая элементы в них. В гибких боксах, хотя вы и создаете контейнер гибких боксов и задаете направление на этом уровне, любой контроль над размером элементов должен осуществляться на самих элементах.

В некоторых случаях вы могли бы использовать любой из методов макетирования. По мере обретения уверенности в обоих методах вы обнаружите, что каждый из них лучше подходит для конкретных потребностей макета, и в итоге вы будете использовать оба метода в своём CSS. Практически никогда нет правильного или неправильного ответа.

Как общее правило, если вы задаёте ширину элементам гибких боксов, чтобы выровнять элементы в одной строке обернутого контейнера гибких боксов с элементами над ними, вам следует вместо этого выбрать двумерный макет сетки.

Нет никаких жестких правил, типа «следует использовать гибкие боксы для небольших компонентов и макет сетки для больших». Небольшой компонент может быть двумерным, а большой макет может быть лучше представлен с помощью одномерного макета. Экспериментируйте — у вас есть выбор методов макетирования, так что используйте его.

Для более подробного сравнения сетки и гибких боксов см. статью Взаимосвязь макета сетки с другими методами макетирования. В этой статье подробно описываются многие способы, которыми макет сетки отличается от макета гибких боксов, и демонстрируются некоторые дополнительные функции, которые вы получаете при использовании макета сетки, например, наложение элементов на сетку. Это также может помочь вам решить, какой метод макета использовать.

Flexbox и display: contents

Значение contents свойства display описывается в спецификации следующим образом:

"Сам элемент не генерирует никакие блоки, но его дочерние элементы и псевдоэлементы по-прежнему генерируют блоки как обычно. Для целей генерации блоков и вывода элемент должен обрабатываться так, как если бы он был заменен своими дочерними элементами и псевдоэлементами в дереве документа."

Это значение display управляет генерацией блоков и тем, должен ли элемент генерировать блок, который мы можем стилизовать и видеть на странице, или же вместо этого блок, который он обычно создаёт, должен быть удален, а дочерние элементы в сущности перемещены, чтобы участвовать в любом методе вывода, которым должен был участвовать родительский элемент. Это намного проще увидеть на примере.

В следующем примере у нас есть гибкая контейнерная структура, содержащая три гибких элемента. Один содержит два вложенных элемента, которые обычно не участвуют в гибком выводе. Гибкий вывод применяется только к непосредственным дочерним элементам гибкой контейнерной структуры.

Добавив display: contents к обёртке вокруг вложенных элементов, вы можете увидеть, что элемент исчез из вывода, позволяя двум дочерним элементам выводиться так, как если бы они были непосредственными дочерними элементами гибкой контейнерной структуры. Вы можете попробовать удалить строку display: contents, чтобы увидеть его возврат.

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

Поскольку блок удаляется, вы не можете, например, добавить цвет фона за вложенными дочерними элементами. Если вы удалите display: contents в этом живом примере, вы увидите, что непосредственный дочерний элемент, который мы удаляем, имеет оранжевый цвет фона. Это также исчезает, когда блок исчезает.

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div class="nested">
    <div>Sub-item 1</div>
    <div>Sub-item 2</div>
  </div>
</div>

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  padding: 1em;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  border: 2px dotted rgb(96 139 168);
  padding: 1em;
  display: flex;
}

.nested {
  background-color: orange;
  display: contents;
}

Предупреждение: Некоторые браузеры неправильно удаляют некоторые элементы с display: contents из дерева доступности (но потомки останутся), удаляя семантику этих элементов, сохраняя при этом их содержимое дочерних элементов. Это означает, что сам элемент может не объявляться средствами чтения с экрана. См. display: contents и display: contents считается вредным.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods