Эта статья поднимает множество проблем. Пожалуйста, помогите улучшить его или обсудите эти проблемы на странице обсуждения . ( Узнайте, как и когда удалить эти сообщения-шаблоны ) ( Узнайте, как и когда удалить этот шаблон сообщения )
|
CSS Гибкая Box Layout , широко известная как Flexbox , [1] является CSS 3 модели веб - макета. [2] Он находится на стадии рекомендации кандидата (CR) W3C . [3] Гибкий макет позволяет автоматически размещать отзывчивые элементы в контейнере в зависимости от размера экрана (или устройства).
Каскадные таблицы стилей |
---|
Концепции |
Философии |
Инструменты |
Сравнения |
Концепции [ править ]
Большинство веб-страниц написано с помощью комбинации HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей). Короче говоря, HTML определяет содержимое и логическую структуру страницы , а CSS определяет, как она выглядит : ее цвета, шрифты, форматирование, макет и стиль.
Макет гибкого блока CSS - это особый способ указать макет HTML-страниц.
Одной из наиболее определяющих особенностей гибкого макета является его способность адаптироваться к форме в зависимости от среды просмотра. Гибкие боксы могут регулироваться по размеру - либо уменьшаться, чтобы избежать ненужной монополизации пространства, либо увеличиваться, чтобы освободить место для содержания, которое должно быть ограничено в его границах. Более того, гибкий макет менее ограничен с точки зрения потока контента, чем макеты, например, блочного и встроенного типов отображения, которые обычно являются однонаправленными. В самом деле, на уровне стиля можно не только указать направление потока изгиба вправо, влево, вверх или вниз; отдельные элементы в гибком контейнере также могут быть автоматически переупорядочены и переставлены в соответствии с доступным пространством макета. [4]
История [ править ]
В 2000-х годах интенсивное использование Интернета ее мобильные агенты послужили стимулом для создания «плавных макетов» и адаптивных элементов для растущего разнообразия размеров экранов. [5] В 2010-е годы интенсивное использование популярных фреймворков макетов JavaScript, таких как Bootstrap , вдохновило CSS на создание гибких блоков и макетов сетки. [6] [7]
Модули CSS 3 включают решения, подобные этому, такие как flexbox [8] и grid . [9]
По состоянию на сентябрь 2020 [Обновить]года 98,69% установленных браузеров (99,29% браузеров для настольных компьютеров и 100% браузеров для мобильных устройств) поддерживают CSS Flexible Box Layout. [10]
Терминология [ править ]
Ниже приведены несколько терминов, связанных с моделью гибкого макета.
Контейнер Flex [ править ]
- Родительский элемент, содержащий все гибкие элементы. Используя свойство CSS display, контейнер можно определить как гибкий или встроенный-гибкий.
Элемент Flex [ править ]
- Любой прямой дочерний элемент, содержащийся в гибком контейнере, считается гибким элементом. Любой текст в элементе контейнера заключен в неизвестный гибкий элемент.
Топоры [ править ]
- Каждый гибкий бокс содержит две оси: основную и поперечную. Главная ось является осью , на которой элементы выравнивания друг с другом. Поперечная ось перпендикулярна к главной оси.
Flex-направление
- Устанавливает главную ось. Возможные аргументы: строка (по умолчанию), обратная строка, столбец, обратный столбец.
Обосновать содержание
- Определяет, как содержимое размещается на главной оси в текущей строке. Необязательные аргументы: left, right, center, space-between, space-around.
Выровнять элементы
- Определяет значение по умолчанию для размещения гибких элементов на поперечной оси каждой линии.
Выровнять содержание
- Определяет способ выравнивания линий поперечной оси по умолчанию.
Выровнять себя
- Определяет, как отдельный элемент размещается вдоль поперечной оси. Это отменяет любые значения по умолчанию, установленные с помощью align-items.
Маршруты [ править ]
- В главном старте / Основной конец стороны определить , где начало размещение гибких элементов внутри гибкого контейнера, начиная с конца основного начала и идти к главным конечной цели. В кроссе-старт / кросс-концевые стороны определяют , где гибкие линии заполняются нежесткими деталями от перекрестного начинают пересекаться-конец.
Приказ
- Помещает элементы в группы и определяет порядок их размещения в контейнере.
Гибкий поток
- Сокращает flex-direction и flex-wrap для размещения гибкого содержимого.
Линии [ править ]
- Элементы Flex могут быть размещены либо на отдельной строке, либо на нескольких строках, как определено свойством flex-wrap, которое управляет как направлением поперечной оси, так и укладкой строк в контейнере.
Размеры [ править ]
- Основной размер и поперечный размер - это, по сути, высота и ширина гибкого контейнера, каждый из которых имеет отношение к главной и поперечной осям соответственно.
Назначьте гибкий блок [ править ]
Обозначить элемент как гибкий относительно легко. Все, что необходимо, это установить для свойства display значение flex или inline-flex следующим образом:
дисплей : гибкий ;
Или же:
дисплей : встроенный гибкий ;
Установив для отображения одно из двух значений, указанных выше, элемент становится гибким контейнером, а его дочерние элементы - гибкими. Установка гибкости отображения делает контейнер элементом уровня блока , а установка отображения гибкости inline делает контейнер элементом встроенного уровня . [11]
Выровнять по центру [ править ]
Одним из преимуществ flexbox является возможность легко выравнивать элементы внутри контейнера по центру страницы как по вертикали, так и по горизонтали.
дисплей : гибкий ; align-items : center ; justify-content : center ;
Ссылки [ править ]
- ^ https://www.w3schools.com/csS/css3_flexbox.asp
- ^ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_F flexible_Box_Layout / Basic_Concepts_of_Flexbox
- ^ «CSS Flexible Box Layout Module Level 1» . www.w3.org . Проверено 23 июля 2016 .
- ^ «CSS Flexible Box Layout Module Level 1» . dev.w3.org . Проверено 23 июля 2016 .
- ^ https://www.ibm.com/developerworks/library/wa-cssqueries/index.html
- ^ https://github.com/kvdmolen/grid-flexbox-sass
- ^ https://www.smashingmagazine.com/2011/09/css3-f flexible- box- layout- explained/
- ^ https://www.w3schools.com/csS/css3_flexbox.asp
- ^ https://www.w3schools.com/css/css_grid.asp
- ^ "Модуль макета гибкого блока CSS" . Могу я использовать . Проверено 3 сентября 2020 .
- ^ Использование гибких блоков CSS - руководство веб-разработчика | MDN