Эта статья была опубликована сообществом cloud+community

Flex — это аббревиатура от «Flexible Box», что означает «гибкий макет», который является режимом макета CSS3. С помощью макета Flex многие проблемы с макетом CSS могут быть решены элегантно. Далее будут представлены шесть свойств контейнера и шесть свойств элемента. К каждому свойству будет прикреплен рендеринг, а конкретный код реализации будет обновлен здесь в виде пути на github.

1. Поддержка браузера

МогунажмитеПроверьте совместимость каждого браузера

2. Свойства контейнера

Обратите внимание, что свойства float, clear и vertical-align дочерних элементов не будут работать, если установлено гибкое расположение.

Есть 6 свойств контейнера, это:

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

(1) свойство flex-direction:

Функция: контроль направления шпинделя

flex-direction: row | row-reverse | column | column-reverse;

По умолчанию: строка

(2) свойство flex-wrap:

Что он делает: По умолчанию элементы располагаются на линии (она же «ось»). Свойство flex-wrap определяет способ переноса, если одна ось не подходит.

flex-wrap: nowrap | wrap | wrap-reverse;

Значение по умолчанию: сейчас

(3) свойство гибкого потока

Роль: это свойство является сокращением для свойства flex-direction и свойства flex-wrap.

По умолчанию: row nowrap

(4) атрибут выравнивания содержимого

Роль: определить выравнивание элемента по главной оси

justify-content: flex-start | flex-end | center | space-between | space-around;

По умолчанию: гибкий старт

(5) атрибут выравнивания-элементов

Назначение: определяет, как элементы выравниваются по поперечной оси.

align-items: flex-start | flex-end | center | baseline | stretch

По умолчанию: гибкий старт

Примечание: Если align-items is stretch, если вы хотите, чтобы каждый flex-item покрывал всю поперечную ось, вам нужно установить высоту всех flex-items: height: auto, иначе эффект не будет достигнут.

(6) атрибут align-content

Свойства определяют выравнивание нескольких осей. Это свойство не действует, если элемент имеет только одну ось.

По умолчанию: растянуть

flex-start: Выровняйте с началом поперечной оси.

flex-end: Выровнять по конечной точке поперечной оси.

center: Выровняйте по средней точке поперечной оси.

space-between: Выровняйте по обоим концам поперечной оси, и расстояние между осями будет равномерно распределено.

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

растянуть: ось занимает всю поперечную ось.

3. Свойства проекта

Есть 6 свойств проекта, они:

order

flex-grow

flex-shrink

flex-basis

flex

align-self

(1) Атрибут заказа:

Функция: определить порядок расположения элементов.Чем меньше значение, тем выше расположение.

По умолчанию: 0

(2) свойство гибкого роста

Функция: При наличии свободного места масштаб проекта увеличивается. Это эквивалентно выделению оставшегося пространства для каждого проекта в соответствии с этим соотношением.

По умолчанию: 0 (не увеличивать)

(3) свойства гибкости и усадки

Роль: flex-shrink: если места недостаточно, «коэффициент сжатия» элемента. 0 означает, что не сжиматься при недостатке места.

По умолчанию: 1

Отрицательные значения недопустимы для этого свойства

(4) свойство гибкости

Функция: определить начальное значение пространства, занимаемого элементом в направлении главной оси.

По умолчанию: авто (исходный размер элемента)

(5) свойство гибкости

Функция: это сокращенная форма свойств flex-grow, flex-shrink и flex-basis;

flex: none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Примечание: несколько общепринятых сокращений;

flex: auto; === flex: 1 1 auto;

flex: none; === flex: 0 0 auto;

flex: initial; === flex: 0 1 auto;

flex: ; === flex: 1 auto;

flex: 1; === flex: 1 1 auto;

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

(6) атрибут align-self

Роль: это свойство позволяет одному элементу иметь выравнивание, отличное от других элементов, и может переопределять свойство align-items.

Значение по умолчанию: auto, что означает наследование свойства align-items родительского элемента.Если родительского элемента нет, это эквивалентно растягиванию.

4. Резюме

В этой статье представлены шесть свойств контейнера и шесть свойств элемента flex-item. Рекомендуется просмотреть демонстрацию в целом, чтобы углубить понимание. Если есть какие-либо проблемы, пожалуйста, поправьте меня.

Эта статья была разрешена автором для публикации Tencent Cloud + Community