Flex — это сокращение от «flexible box», что переводится как «гибкий макет». Оно используется для обеспечения максимальной гибкости блочной модели. Любой контейнер можно обозначить как гибкий макет. Вам нужно только установить «display:flex». ; встроенные элементы могут быть установлены с помощью «display:inline-flex»; следует отметить, что если установлен гибкий макет, атрибуты float,clear иvertical-align дочерних элементов будут недействительны.
1. Основные понятия
Гибкий макет — это модель макета, часто называемая flexbox. После использования гибкого макета он предоставляет мощные возможности выделения пространства и выравнивания для дочерних элементов.
Прежде чем использовать гибкий макет, обычно используемые макеты включают в себя: гибкий макет, плавающий макет, макет позиционирования и т. д. Недостаток заключается в том, что дочернему элементу необходимо контролировать свое положение в родительском элементе, а также обращать внимание на схлопывание высоты родительского элемента.
Преимущество гибкого подхода заключается в том, что он позволяет избежать негибких форм макета, создать больше режимов макета на выбор и решить такие проблемы, как выравнивание, распределение и отзывчивость подэлементов. Недостаток заключается в том, что он может полагаться только на свой собственный режим макета, и его нельзя изменить, если есть небольшие изменения.
Элементы, использующие гибкую компоновку, называются гибкими контейнерами или для краткости «контейнерами». Все его дочерние элементы автоматически генерируют элементы контейнера, называемые гибкими элементами (flex items), называемые «элементами»;
По умолчанию контейнер имеет две основные оси: горизонтальную главную ось (главную ось) и вертикальную поперечную ось (поперечную ось). Начальное положение главной оси (то есть пересечение границ) называется главным началом, а конечное положение называется основным концом; начальное положение поперечной оси. Это называется перекрестным началом, а конечное положение называется перекрестным концом. По умолчанию элементы располагаются вдоль главной оси. Пространство главной оси, занимаемое одним элементом, называется основным размером, а пространство по поперечной оси, занимаемое одним элементом, называется поперечным размером.
Следующие свойства предусмотрены в CSS для реализации макета Flex:
В зависимости от области применения эти свойства можно разделить на две категории: свойства контейнера (flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content) и свойства элемента (order, align-self). , flex, flex-grow, flex-shrink, flex-basis). Давайте познакомимся с использованием этих атрибутов.
2. Свойства контейнера
(1) flex-direction : укажите направление расположения подэлементов в гибком поле;
Необязательные значения атрибута следующие:
Свойство flex-direction определяет направление главной оси (то есть направление расположения элементов);
.box{flex-direction:row|row-reverse|column|column-reverse;}Этот атрибут имеет 4 значения
● строка (значение по умолчанию): главная ось горизонтальна, начальная точка находится на левом конце;
●row-reverse: главная ось горизонтальна, начальная точка находится на правом конце;
●столбец: главная ось вертикальная, начальная точка находится на верхнем крае;
● колонка-обратная: главная ось вертикальная, начальная точка находится на нижнем крае;
Вышеупомянутый эффект показан на рисунке ниже:
(2) flex-wrap : укажите метод упаковки подэлементов в гибком поле;
По умолчанию элементы располагаются на линии (также называемой «осью»). Атрибут flex-wrap определяет, как переносить линию, если ось не может быть упорядочена. Есть три значения:
.box{flex-wrap:nowrap|wrap|wrap-reverse}● nowrap (по умолчанию): перенос строк отсутствует, эффект расположения следующий:
●wrap: перенос, первая строка находится вверху, эффект расположения следующий:
●wrap-reverse: перенос, первая строка внизу, эффект расположения следующий:
(3) flex-flow : это свойство действует на контейнер гибкого блока и используется для управления направлением расположения и переносом строк элементов в контейнере. Это свойство является составным свойством, состоящим из flex-direction и flex-wrap;
.box{flex-flow:<flex-direction><flex-wrap>;}(4) justify-content : этот атрибут действует на подэлементы в контейнере гибкого поля и используется для управления распределением самих подэлементов в направлении расположения;
Свойство justify-content определяет выравнивание элемента по главной оси.
.box{justify-content:flex-start|flex-end|center|space-between|space-around;}Этот атрибут имеет 5 значений:
● flex-start (значение по умолчанию): выравнивание по левому краю;
●гибкий конец: выравнивание по правому краю;
●center: по центру;
●space-between: выровняйте оба конца, и интервалы между элементами будут одинаковыми;
●пространство вокруг: расстояние с обеих сторон каждого элемента одинаково, поэтому расстояние между элементами в два раза больше, чем расстояние между элементом и границей;
Вышеупомянутый эффект показан на рисунке ниже:
(5) align-items : этот атрибут действует на контейнер гибкого блока и используется для управления выравниванием всех подэлементов в гибком блоке в вертикальном направлении направления расположения;
Свойство align-item определяет, как элементы выравниваются по поперечной оси.
.box{align-items:flex-start|flex-end|center|baseline|stretch;}Этот атрибут имеет 5 значений. Конкретное выравнивание связано с направлением поперечной оси. Предполагается, что поперечная ось направлена сверху вниз:
●flex-start: выравнивание начальной точки поперечной оси;
●гибкий конец: выровняйте среднюю точку поперечной оси;
●центр: выравнивание средней точки поперечной оси;
●базовая линия: выравнивание базовой линии первой строки текста элемента;
●stretch (значение по умолчанию): если для элемента не задана высота или установлено значение «авто», он будет занимать всю высоту контейнера;
Вышеупомянутый эффект показан на рисунке ниже:
3. Свойства проекта
(1) атрибут заказа
Атрибут order используется для установки порядка, в котором элементы появляются в контейнере. Вы можете определить положение элемента в контейнере с помощью определенных значений. Синтаксический формат атрибута следующий:
номер заказа;
Где число — это позиция элемента в контейнере, а значение по умолчанию — 0.
Пример:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;margin-top:10px;}.flexdiv{width:60px;height:60px;margin-bottom:5px; border:1pxsolidblack;}.flexdiv:nth-child(1){order:3;}.flexdiv:nth-child( 2){order:1;}.flexdiv:nth-child(3){order:2;}.flexdiv:nth-child(4){order:5;}.flexdiv:nth-child(5){order: 4;</style></head><body><div><div>A</div><div>B</div><div>C</div><div>D</div><div >E</div></div></body></html>Результаты запуска:
(2) атрибут align-self
Атрибут align- self позволяет вам установить для элемента выравнивание, отличное от других элементов. Этот атрибут может переопределить значение атрибута align-items. Необязательные значения атрибута align-self следующие:
Пример:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;height:150px;}.flexdiv{width: 60 пикселей; высота: 60 пикселей; граница: 1 pxsolidblack;}.flexdiv:nth-child(3){align-self:flex-start;</style></head><body><div><div>A</div><div>B</ div><div>C</div><div>D</div><div>E</div></div></body></html>Результаты запуска:
(3)гибкий атрибут
Атрибут flex — это аббревиатура трех атрибутов flex-grow, flex-shrink и flex-basis. Формат синтаксиса следующий:
flex:flex-growflex-shrinkflex-basis;
Описание параметра следующее:
● flex-grow: (обязательный параметр) число, используемое для установки величины роста элемента относительно других элементов, значение по умолчанию — 0;
●flex-shrink: (необязательный параметр) число, используемое для установки уменьшения элемента относительно других элементов. Значение по умолчанию — 1;
●flex-basis: (необязательный параметр) Длина элемента, допустимые значения: auto (значение по умолчанию, указывает на автоматическое), наследовать (указывает наследование значения этого атрибута от родительского элемента) или добавлять %, px, em. и т. д. до определенного значения. Форма единицы.
Кроме того, атрибут flex имеет два сокращенных значения, а именно auto (1 1 auto) и none (0 0 auto).
Пример кода выглядит следующим образом:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;}.flexdiv{width:60px;height: 60px;border:1pxsolidblack;}.f lexdiv:nth-child(2){flex:0;}.flexdiv:nth-child(4){flex:11auto;</style></head><body><div><div>A</div ><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>Результаты запуска:
