Гибкий макет CSS-блока
 | В этой статье есть несколько проблем. Пожалуйста, помогите улучшить его или обсудите эти проблемы на странице обсуждения . ( Узнайте, как и когда удалять эти шаблонные сообщения )
|
| Гибкий макет CSS-блока | |
| Аббревиатура | Флексбокс |
|---|---|
| Родное имя | Гибкий макет CSS-блока |
| Статус | Кандидат в рекомендации (CR) |
| Год начался | 23 июля 2009 г. [1] |
| Последняя версия | Уровень 1 [2] 9 ноября 2018 г. [2] |
| Предварительная версия | Рабочий проект 25 марта 2021 г. [3] |
| Организация | |
| комитет | Рабочая группа CSS [2] |
| Редакторы |
Бывшие редакторы |
| Базовые стандарты | CSS |
| Веб-сайт | www |
CSS Flexible Box Layout , широко известный как Flexbox , [2] — это модель веб-макета CSS . [4] Он находится на . стадии рекомендации кандидата (CR) W3C [2] Гибкий макет позволяет адаптивные автоматически располагать элементы внутри контейнера в зависимости от размера области просмотра (экрана устройства).
| Каскадные таблицы стилей |
|---|
| Концепции |
| Философия |
| Инструменты |
| Сравнения |
Концепции
[ редактировать ]Большинство веб-страниц написаны с использованием комбинации HTML (языка гипертекстовой разметки) и CSS (каскадных таблиц стилей). Короче говоря, HTML определяет содержимое и логическую структуру страницы , а CSS определяет, как она выглядит : цвета, шрифты, форматирование, макет и стиль.
Макет CSS flex-box — это особый способ указать макет HTML-страниц.
Одной из наиболее определяющих особенностей гибкого макета является его способность подгоняться по форме в зависимости от среды просмотра. Гибкие блоки можно регулировать по размеру — либо уменьшать, чтобы избежать ненужной монополизации пространства, либо увеличивать, чтобы освободить место для содержимого, вписывающегося в его границы. Более того, гибкий макет менее ограничителен с точки зрения потока контента, чем другие модели макета CSS, которые обычно являются однонаправленными. Гибкий направленный поток можно указать вправо, влево, вверх или вниз. Отдельные элементы внутри гибкого контейнера также могут автоматически переставляться в соответствии с доступным пространством макета. [3]
История
[ редактировать ]С конца 2000-х годов интенсивное использование Интернета мобильными агентами привело к созданию «гибких макетов» и адаптивных элементов для растущего разнообразия размеров экранов . [5] В 2010-х годах интенсивное использование популярных JavaScript макетирования фреймворков , таких как Bootstrap , вдохновило CSS на создание спецификаций гибкого блока и сетки. [6]
Модули CSS включали подобные решения, такие как Flexbox. [2] и сетка . [7] Flexbox изначально основан на аналогичной функции, доступной в XUL , наборе инструментов пользовательского интерфейса от Mozilla , используемом в Firefox . [8] [9]
По состоянию на декабрь 2022 г. [update], 99,68% установленных браузеров (99,59% браузеров для настольных компьютеров и 100% мобильных браузеров) поддерживают CSS Flexible Box Layout. [10]
Терминология
[ редактировать ]Следующие термины связаны с моделью макета flexbox.
- Гибкий контейнер
- Родительский элемент, содержащий все гибкие элементы. Используя свойство отображения CSS, контейнер можно определить как гибкий или встроенный.
- Гибкий элемент
- Любой прямой дочерний элемент, содержащийся в гибком контейнере, считается гибким элементом. Любой текст внутри элемента контейнера заключен в неизвестный гибкий элемент.
- Топоры
- Каждый гибкий блок содержит две оси: главную и поперечную. Основная ось — это ось, по которой элементы выравниваются друг с другом. Поперечная ось перпендикулярна главной оси.
- Гибкое направление
- Устанавливает главную ось. Возможные аргументы: строка (по умолчанию), обратная строка, столбец, обратная колонка.
- Justify-содержание
- Определяет, как содержимое размещается на главной оси текущей строки. Необязательные аргументы: слева, справа, по центру, пространство между, пространство вокруг.
- Выровнять элементы
- Определяет значение по умолчанию для размещения гибких элементов на поперечной оси каждой строки.
- Выровнять-контент
- Определяет значение по умолчанию для выравнивания линий поперечной оси.
- Выровнять-самостоятельно
- Определяет, как отдельный элемент размещается вдоль поперечной оси. Это переопределяет любые значения по умолчанию, установленные с помощью align-items.
Направления
[ редактировать ]- перекрестный старт
- перекрестный
- Стороны перекрестного начала/конца определяют, где гибкие линии заполняются гибкими элементами от перекрестного начала до перекрестного конца.
- главный старт
- основной конец
- Стороны main-start/main-end определяют, с чего начать размещение гибких элементов внутри гибкого контейнера, начиная с основного начала и заканчивая основным концом.
- Заказ
- Размещает элементы в группах и определяет, в каком порядке они должны быть размещены в контейнере.
- Гибкий поток
- Сокращения flex-direction и flex-wrap для размещения гибкого содержимого.
Линии
[ редактировать ]- Линии
- Гибкие элементы могут быть размещены либо на одной строке, либо на нескольких строках, как определено свойством flex-wrap, которое управляет как направлением поперечной оси, так и тем, как линии складываются внутри контейнера.
Размеры
[ редактировать ]- Основной размер
- Размер креста
- Основной размер и поперечный размер — это высота и ширина гибкого контейнера, каждый из которых относится к основной и поперечной осям соответственно.
Использование
[ редактировать ]Чтобы обозначить элемент как гибкий элемент, необходимо установить для свойства отображения CSS элемента значение flex или inline-flex, как показано ниже:
display: flex;
Или:
display: inline-flex;
При установке для отображения одного из двух значений, указанных выше, элемент становится гибким контейнером, а его дочерние элементы — гибкими элементами. Установка отображения на flex делает контейнер элементом блочного уровня , а установка отображения на inline-flex делает контейнер элементом строчного уровня . [4]
Выровнять по центру
[ редактировать ]Одним из преимуществ flexbox является возможность легко выравнивать элементы внутри контейнера по центру страницы как по вертикали, так и по горизонтали.
display: flex;
align-items: center;
justify-content: center;
Ссылки
[ редактировать ]- ^ «История публикаций модуля гибкого макета CSS, уровень 1 — W3C» . W3C . нд . Проверено 8 апреля 2021 г.
- ^ Jump up to: а б с д и ж г Аткинс-младший, Таб; Этемад, Элика Дж.; Атанасов, Россен; Могилевский, Алекс; Барон, Л. Дэвид; Дикин, Нил; Хиксон, Ян; Хаятт, Дэвид, ред. (09.11.2018). «Модуль гибкого макета CSS, уровень 1» . W3C . Проверено 8 апреля 2021 г.
- ^ Jump up to: а б Аткинс-младший, Таб; Этемад, Элика Дж.; Атанасов, Россен; Могилевский, Алекс; Барон, Л. Дэвид; Дикин, Нил; Хиксон, Ян; Хаятт, Дэвид, ред. (25 марта 2021 г.). «Модуль гибкого макета CSS, уровень 1» . Черновики редактора рабочей группы CSS . Проверено 8 апреля 2021 г.
- ^ Jump up to: а б «Основные понятия флексбокса» . Веб-документы MDN . нд . Проверено 8 апреля 2021 г.
- ^ Бейл, Джефф (23 октября 2012 г.). «Используйте медиазапросы CSS для создания адаптивных веб-сайтов» . Разработчик IBM . Архивировано из оригинала 13 октября 2020 г. Проверено 8 апреля 2021 г.
- ^ Шеперд, Ричард (19 сентября 2011 г.). «Гибкая компоновка CSS3: все, что я хотел бы знать, когда начинал» . Разрушительный журнал . Проверено 8 апреля 2021 г.
- ^ Аткинс-младший, Таб; Этемад, Элика Дж.; Атанасов, Россен; Бруфау, Ориол; Могилевский, Алекс; Капп, Фил, ред. (18 декабря 2020 г.). «Модуль макета сетки CSS, уровень 1» . W3C . Рабочая группа CSS . Проверено 8 апреля 2021 г.
- ^ Шеперд, Ричард (19 сентября 2011 г.). «Гибкая компоновка CSS3: все, что я хотел бы знать, когда начинал» . Разрушительный журнал . Проверено 8 апреля 2021 г.
- ^ Модуль гибкой компоновки блоков, рабочий проект W3C, 23 июля 2009 г.
- ^ «Модуль гибкой компоновки CSS» . Могу ли я использовать . Проверено 3 сентября 2020 г.