This page was translated from English by the community.Learn more and join the MDN Web Docs community.
Выравнивание полей CSS
Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации.
Примечание:Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.
Старые методы выравнивания
У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используяtext-align, центральные блоки, используя automargins, а в макетах таблицы или встроенного блока, используяvertical-align свойство. Выравнивание текста теперь покрывается модулямиInline Layout иCSS Text, и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.
Если вы изначально узналиFlexbox, вы можете считать эти свойства частью спецификации Flexbox и некоторые из свойств действительно перечислены в Level 1 Flexbox. Однако в спецификации отмечается, что спецификация Box Alignment должна рассматриваться, поскольку она может добавить дополнительные возможности по сравнению с тем, что в настоящее время находится в Flexbox.
Основные примеры
Следующие примеры демонстрируют, как некоторые из Box Alignment Properties применяются вGrid andFlexbox.
Пример выравнивания раскладки сетки CSS
В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощьюjustify-content. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощьюalign-items. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путём установкиalign-self в центр.
Пример выравнивания Flexbox
В этом примере три элемента гибкости выровнены по главной оси с использованиемjustify-content и на поперечной оси с использованиемalign-items. Первый элемент переопределяетalign-items, заданные в группеalign-self поcenter.
Ключевые понятия и терминология
Спецификация описывает некоторую терминологию выравнивания, чтобы упростить обсуждение этих свойств выравнивания вне их реализации в рамках конкретного метода компоновки. Существуют также некоторые ключевые концепции, которые являются общими для всех методов макета.
Связь с режимами записи
Выравнивание связано с режимами записи, когда мы выравниваем элемент, который мы не рассматриваем, если мы сопоставляем его с физическими размерами сверху, справа, снизу и слева. Вместо этого мы описываем выравнивание с точки зрения начала и конца конкретного измерения, с которым мы работаем. Это гарантирует, что выравнивание работает так же, как в режиме записи, который имеет документ.
Два измерения выравнивания
При использовании свойств выравнивания ячеек вы выровняете содержимое по одной из двух осей - inline (или main) оси и block (или cross) оси. Внутренняя ось - это ось, по которой используются слова в потоке предложения в режиме записи - для английского языка, например, встроенная ось горизонтальна. Ось блока - это ось, вдоль которой выложены блоки, такие как элементы абзаца, и проходит по оси Inline.
При выравнивании элементов на встроенной оси вы будете использовать свойства, начинающиеся сjustify-:
При выравнивании элементов на оси блока вы будете использовать свойства, которые начинаются сalign-:
Flexbox добавляет дополнительное усложнение в том, что указанное выше верно, когдаflex-direction установлено вrow. Свойства меняются местами, когда flexbox установлен вcolumn. Поэтому при работе с flexbox легче думать о главной и поперечной оси, а не о линии и блоке. Свойстваjustify- всегда используются для выравнивания по главной оси,align- на поперечной оси.
The alignment subject
Объект выравнивания - это то, что выровнено. Дляjustify-self, илиalign-self, или при настройке этих значений как группы сjustify-items илиalign-items это будет поле элемента, в котором используется это свойство. Свойстваjustify-content иalign-content различаются для каждого метода макета.
The alignment container
Контейнер выравнивания - это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.
На приведённом ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.
Fallback alignment
Если вы установите выравнивание, которое не может быть выполнено, тогдавозвратное выравнивания вступит в игру и обработает доступное пространство. Это резервное выравнивание указывается отдельно для каждого метода макета и подробно описано на странице для этого метода.
Типы выравнивания
Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов.
- Positional alignment (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.
- Baseline alignment (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.
- Distributed alignment (распределённое выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.
Значения ключевых слов позиционирования
Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого сjustify-content иalign-content, а также для самовыравнивания сjustify-self иalign-self.
centerstartendself-startself-endflex-startfor Flexbox onlyflex-endfor Flexbox onlyleftright
Помимо физических значенийleft иright, которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.
Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значениеjustify-contentstart, это приведёт к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значениеstart приведёт к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.
Оба этих примера имеютjustify-content: start, однако местоположение начала изменяется в соответствии с режимом записи.
Исходное выравнивание
Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощьюjustify-content иalign-content, а также для самовыравнивания сjustify-self иalign-self.
baselinefirst baselinelast baseline
Исходное выравнивание содержимого - указание значения выравнивания базовой линии дляjustify-content илиalign-content - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.
Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путём добавления поля за пределами полей. Self alignment - это использованиеjustify-self илиalign-self или при настройке этих значений в виде группы сjustify-items иalign-items.
Distributed alignment
Ключевые слова распределённого выравнивания используются с параметрамиalign-content иjustify-content. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:
stretchspace-betweenspace-aroundspace-evenly
Например, элементы Flex Layout сначала выровнены с использованиемflex-start. Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, сflex-direction в видеrow элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов.
Если вы устанавливаетеjustify-content: space-between в контейнере flex, доступное пространство теперь разделяется и помещается между элементами.
Для того, чтобы эти ключевые слова вступили в силу, должно быть доступно пространство в измерении, для которого вы хотите выровнять элементы. Без места, нечего распространять.
Выравнивание переполнения
safe иunsafe ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое словоsafe будет выравниваться дляstart в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.
Если вы укажетеunsafe, выравнивание будет выполнено, даже если это приведёт к такой потере данных.
Пробелы между boxes
Спецификация выравнивания коробки также включает свойстваgap,row-gap иcolumn-gap . Эти свойства позволяют установить постоянный разрыв между элементами в строке или столбце в любом методе макета, который имеет элементы, расположенные таким образом.
Свойствоgap является сокращением дляrow-gap иcolumn-gap, что позволяет сразу установить эти свойства:
В приведённом ниже примере макет сетки использует сокращённуюgap, чтобы установить разрыв10px между дорожками строк и2em разрыв между дорожками столбцов.
В этом примере я использую свойствоgrid-gap в дополнение кgap. Первоначальные свойства зазора были предварительно префикснымиgrid- в спецификации Grid Layout, а некоторые браузеры поддерживают только эти префиксные версии.
Префиксные версии будут поддерживаться как псевдоним неподписанных, однако вы всегда можете удвоить так, как это было бы с префиксами поставщика, добавив свойствоgrid-gap, а затем свойствоgap с теми же значениями.
Кроме того, имейте в виду, что другие вещи могут увеличить визуальный промежуток, отображаемый, например, используя ключевые слова распределения пространства или добавляя поля к элементам.
Страницы, детализирующие индивидуальные свойства выравнивания
Поскольку свойства выравнивания полей CSS реализованы по-разному в зависимости от спецификации, с которой они взаимодействуют, обратитесь к следующим страницам для каждого типа макета для получения подробных сведений о том, как использовать с ним свойства выравнивания:
Справка
CSS Properties
Glossary Entries
Guides
- CSS Flexbox guide:Basic concepts of Flexbox
- CSS Flexbox guide:Aligning items in a flex container
- CSS Grid guide:Box alignment in CSS Grid layouts