Учебное пособие по мини-программе Flex Layout: синтаксис

Перепечатано из: Руан Ифэн

Оригинальная ссылка:Учебное пособие по гибкому макету: синтаксис

Макет веб-страницы (макет) является ключевым применением CSS.

Традиционные решения для компоновки, основанные накоробочная модель,полагатьсяdisplayсвойство +positionсвойство +floatАтрибуты. Это очень неудобно для тех специальных макетов, таких как,Центрировать по вертикалиЭтого нелегко достичь.

В 2009 году W3C предложил новую схему Flex layout, которая позволяет легко, полностью и быстро реализовать различные макеты страниц. В настоящее время он поддерживается всеми браузерами, а это значит, что теперь использовать эту функцию безопасно.

Гибкая компоновка станет основой для будущих макетов. В этой статье описывается его синтаксис,следующий постДает нотацию Flex для общих макетов. пользователи сетиJailBreakСделано для всех примеров в этой статьеDemo, также можно обратиться к.

Следующее содержание в основном относится к следующим двум статьям:A Complete Guide to Flexboxа такжеA Visual Guide to CSS3 Flexbox Properties.

1. Что такое гибкий макет?

Flex — это аббревиатура от Flexible Box, что означает «гибкая компоновка», которая используется для обеспечения максимальной гибкости блочной модели.

Любой контейнер можно указать в качестве макета Flex.

.box{
  display: flex;
}

Встроенные элементы также могут использовать макет Flex.

.box{
  display: inline-flex;
}

Необходимо добавить браузеры на базе Webkit.-webkitприставка.

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

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

2. Основные понятия

Элементы, использующие раскладку Flex, называются flex-контейнерами или, для краткости, «контейнерами». Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами (flex-элементами), или для краткости «элементами».

Контейнер по умолчанию имеет две оси: горизонтальную главную ось (основную ось) и вертикальную поперечную ось (поперечную ось). Начальное положение главной оси (пересечение с границей) называетсяmain start, конечная позиция называетсяmain end; начальное положение поперечной оси называетсяcross start, конечная позиция называетсяcross end.

По умолчанию элементы располагаются вдоль главной оси. Пространство веретена, занимаемое одним изделием, называетсяmain size, пространство, занимаемое поперечной осью, называетсяcross size.

В-третьих, свойства контейнера

Для контейнера заданы следующие 6 свойств.

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

3.1 свойство flex-direction

flex-directionСвойство определяет ориентацию главной оси (то есть направление расположения элементов).

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

Может иметь 4 значения.

• row(по умолчанию): основная ось горизонтальна, а начальная точка находится на левом конце.
• row-reverse: главная ось находится в горизонтальном направлении, а начальная точка находится в правом конце.
• column: главная ось находится в вертикальном направлении, а начальная точка находится на верхнем краю.
• column-reverse: главная ось вертикальна, а начальная точка находится на нижнем краю.

3.2 свойство flex-wrap

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

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Это может предпринять три значения.

(1)nowrap(по умолчанию): Не переносить.

(2)wrap: перевод строки, первая строка вверху.

(3)wrap-reverse: перевод строки, первая строка внизу.

3.3 flex-flow

flex-flowсобственностьflex-directionсвойства иflex-wrapСокращение для свойства, по умолчаниюrow nowrap.

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 свойство justify-content

justify-contentСвойство определяет выравнивание элемента по главной оси.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

Может принимать 5 значений, а конкретное выравнивание связано с направлением оси. Далее предполагается, что главная ось направлена ​​слева направо.

• flex-start(по умолчанию): по левому краю
• flex-end: выравнивание по правому краю
• center: центр
• space-between: Оба конца выровнены с одинаковым интервалом между элементами.
• space-around: равные интервалы с обеих сторон каждого элемента. Таким образом, расстояние между элементами в два раза больше, чем расстояние между элементами и границей.

3.5 свойство align-items

align-itemsСвойства определяют, как элементы выравниваются по поперечной оси.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

Может принимать 5 значений. Конкретное выравнивание связано с направлением поперечной оси.Следующее предполагает, что поперечная ось направлена ​​сверху вниз.

• flex-start: Начальная точка поперечной оси выровнена.
• flex-end: Выровняйте конечную точку поперечной оси.
• center: Выровняйте среднюю точку поперечной оси.
• baseline: Базовое выравнивание первой строки текста элемента.
• stretch(по умолчанию): если элемент не имеет высоты или установлен автоматически, он будет заполнять всю высоту контейнера.

3.6 свойство align-content

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

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Это свойство может принимать 6 значений.

• flex-start: Выровнять по начальной точке поперечной оси.
• flex-end: Выровнять по конечной точке поперечной оси.
• center: Выровняйте по средней точке поперечной оси.
• space-between: Выровняйте по обоим концам поперечной оси, и расстояние между осями будет равномерно распределено.
• space-around: Расстояние с обеих сторон каждой оси одинаковое. Следовательно, расстояние между осями в два раза больше, чем расстояние между осями и рамой.
• stretch(по умолчанию): ось заполняет всю поперечную ось.

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

Для элемента заданы следующие 6 свойств.

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.1 атрибут заказа

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

.item {
  order: <integer>;
}

4.2 свойство flex-grow

flex-growСвойство определяет увеличение элемента, по умолчанию0, то есть если осталось место, оно не увеличивается.

.item {
  flex-grow: <number>; /* default 0 */
}

если все предметыflex-growоба свойства равны 1, они будут поровну делить оставшееся пространство (если оно есть). Если проектflex-growСвойство до 2, остальные проекты 1, то оставшееся пространство занято прежним, чем другие элементы более чем в два раза.

4.3 свойство flex-shrink

flex-shrinkСвойство определяет коэффициент уменьшения элемента, по умолчанию равен 1, то есть если места недостаточно, элемент будет уменьшен.

.item {
  flex-shrink: <number>; /* default 1 */
}

если все предметыflex-shrinkВсе атрибуты равны 1, и когда места недостаточно, они будут пропорционально уменьшены. Если проектflex-shrinkАтрибут равен 0, а все остальные элементы равны 1. Когда места недостаточно, первый не будет уменьшаться.

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

4.4 свойства гибкости

flex-basisСвойство определяет основной размер, который занимает элемент перед выделением лишнего пространства. На основе этого свойства браузер вычисляет, есть ли лишнее место на главной оси. Его значение по умолчаниюauto, что является исходным размером элемента.

.item {
  flex-basis: <length> | auto; /* default auto */
}

Он может быть настроен на следованиеwidthилиheightПри одинаковом значении свойства (например, 350 пикселей) элемент будет занимать фиксированное пространство.

4.5 гибкие свойства

flexсобственностьflex-grow, flex-shrinkа такжеflex-basisсокращение для , по умолчанию0 1 auto. Последние два свойства являются необязательными.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Это свойство имеет два сокращенных значения:auto (1 1 auto) и нет (0 0 auto).

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

4.6 свойство align-self

align-selfАтрибут позволяет одному элементу иметь выравнивание, отличное от других элементов, может быть переопределеноalign-itemsАтрибуты. По умолчаниюauto, что означает наследование от родительского элементаalign-itemsатрибут, если нет родительского элемента, он эквивалентенstretch.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Это свойство может принимать 6 значений, кроме auto, остальные точно такие же, как и свойство align-items.

(над)