Классы макета в Tailwind CSS

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

Далее мы подробно объясним некоторые ключевые классы, связанные с макетом.

1. Соотношение сторон

Классы соотношения сторон помогают задать соотношение сторон элемента, предотвращая его растяжение или сжатие в адаптивном дизайне.

Основные классы:

2. Контейнер

Класс Container делает элементы-контейнеры адаптивными к разным размерам экрана; обычно используется для задания максимальной ширины содержимого.

Основные классы:

• container: Делает элемент адаптивным контейнером.
• mx-auto: Центрирует контейнер по горизонтали.

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

В этих примерах первый<div>всегда будет занимать 100% ширины, а второй<div>на больших экранах (lg) и выше его максимальная ширина будет ограничена 1024px.mx-autoКласс используется для горизонтального центрирования контейнера.

3. Columns

Классы Columns используются для реализации многоколоночных макетов.

Вы можете управлять количеством колонок и промежутком между колонками.

Основные классы:

• columns-{n}: Задает количество колонок.
• space-x-{size}: Задает промежуток между колонками.

4. Пагинация

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

Основные классы:

• break-after-{value}: Управляет поведением после разрыва страницы/колонки.
• break-before-{value}: Управляет поведением перед разрывом страницы/колонки.
• break-inside-{value}: Управляет поведением разрывов внутри элемента.

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

• break-after-autoПозволяет браузеру решать, следует ли делать разрыв после элемента.
• break-after-avoidУказывает браузеру по возможности избегать разрыва после элемента.

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

• break-before-autoПозволяет браузеру решать, следует ли делать разрыв перед элементом.
• break-before-avoidСообщает браузеру о необходимости по возможности избегать разрыва перед элементом.

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

• break-inside-autoПозволяет браузеру решать, следует ли выполнять разрыв внутри элемента.
• break-inside-avoidСообщает браузеру о необходимости по возможности избегать разрыва внутри элемента.

В этом примере,<div>элемент настроен на двухколоночный макет (columns-2), который содержит четыре<p>абзаца. Второй<p>абзац имеетbreak-after-columnкласс, который принудительно выполняет разрыв колонки после этого абзаца, но не допускает разрыва страницы. Это означает, что если содержимого достаточно, содержимое после второго абзаца начнётся в новой колонке, а не продолжится на следующей строке той же колонки. Остальные абзацы не имеют специальных директив разрыва колонок, поэтому они будут естественно перетекать в соответствии со своим содержимым.

5. Разрыв текста

Ниже приведены утилитарные классы в Tailwind CSS, используемые для управления тем, как фрагменты элементов отображаются на нескольких строках, в колонках или на страницах, вместе с соответствующими свойствами CSS:

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

• box-decoration-cloneЗаставляет каждый фрагмент блока отображать полное оформление.
• box-decoration-slice«Разрезает» оформление в точке разделения блока, сохраняя оформление визуально непрерывным.

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

6. Размеры блока

Tailwind CSS предоставляет два утилитарных класса для управления блочной моделью элемента (box-sizing):

• box-border: Вычисляет общий размер элемента, включая внутренние отступы и границы.
• box-content: Вычисляет размер элемента, исключая внутренние отступы и границы.

1、box-border

Свойство CSS:

box-sizing: border-box;

Используйте утилитарный класс box-border, чтобы установить для свойства box-sizing элемента значение border-box. Это означает, что когда вы задаёте высоту или ширину элемента, браузер включает границы и внутренние отступы элемента в этот размер.

Если размер элемента равен 100px × 100px, при границе 2px и внутреннем отступе 4px общий отображаемый размер элемента составит 112px × 112px.

2、box-content

Свойство CSS:

box-sizing: content-box;

Используйте утилитарный класс box-content, чтобы задать для свойства box-sizing элемента значение content-box. Это означает, что браузер добавляет границы и внутренние отступы сверх указанной ширины или высоты элемента.

Если размер элемента равен 100px × 100px, при границе 2px и внутреннем отступе 4px фактический отображаемый размер элемента будет 112px × 112px, а внутренняя область содержимого — 100px × 100px.

свойство display

Свойство display используется для управления типом отображения элемента и определяет, как элемент отображается на странице.

Используйте служебные классы table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group и table-footer-group, чтобы создавать элементы, которые ведут себя как соответствующие элементы таблицы.

Float

float-*Управляет положением плавающего элемента, часто используется для обтекания его текстом.

Основные классы:

Очистка обтекания

Утилитарные классы в Tailwind CSS для управления тем, как элемент очищает обтекание, а также соответствующие им CSS-свойства:

isolate

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

Класс isolate помогает создать изолированную среду, в которой на порядок наложения элемента не влияют внешние элементы, а isolation-auto позволяет браузеру обрабатывать контекст наложения согласно правилам по умолчанию.

Используйте утилитарные классы isolate и isolation-auto, чтобы управлять тем, должен ли элемент явно создавать новый контекст наложения.

object-fit

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

Используйте object-cover, чтобы задать размер содержимого элемента для покрытия его контейнера: