Flex items align: align-items — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

align-items ⚡️ HTML и CSS с примерами кода

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

Демо

Flexbox и выравнивание
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • order
  • justify-content
  • align-content
  • place-content
  • justify-items
  • align-items
  • place-items
  • justify-self
  • align-self
  • place-self
  • row-gap
  • column-gap
  • gap

Синтаксис

/* Basic keywords */
align-items: normal;
align-items: stretch;
/* Positional alignment */
align-items: center; /* Pack items around the center */
align-items: start; /* Pack items from the start */
align-items: end; /* Pack items from the end */
align-items: flex-start; /* Pack flex items from the start */
align-items: flex-end; /* Pack flex items from the end */
align-items: self-start;
align-items: self-end;
align-items: left; /* Pack items from the left */
align-items: right; /* Pack items from the right */
/* Baseline alignment */
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /* Overflow alignment (for positional alignment only) */
align-items: safe center;
align-items: unsafe center;
/* Global values */
align-items: inherit;
align-items: initial;
align-items: unset;

Значения

flex-startФлексы выравниваются в начале поперечной оси контейнера.
centerФлексы выравниваются по линии поперечной оси.
flex-endФлексы выравниваются в конце поперечной оси контейнера.
stretchФлексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.
baselineФлексы выравниваются по их базовой линии.

Значение по-умолчанию: stretch

Наследуется: нет

Применяется к флекс-контейнеру

Анимируется: нет

Объектная модель: object.style.alignItems

Спецификации

  • CSS Flexible Box Layout Module

Поддержка браузерами

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>align-items</title>
    <style>
      .flex-container {
        display: flex;
        align-items: stretch; /* Растягиваем */
      }
      . flex-item {
        margin-left: 1rem; /* Расстояние между блоков */
        padding: 10px; /* Поля вокруг текста */
        width: 33.333%; /* Ширина блоков */
      }
      .flex-item:first-child {
        margin-left: 0;
      }
      .item1 {
        background: #f0ba7d;
      }
      .item2 {
        background: #cae2aa;
      }
      .item3 {
        background: #a6c0c9;
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        Фенек — лисица, живущая в пустынях Северной Африки.
        Имеет достаточно миниатюрный размер и своеобразную
        внешность с большими ушами.
      </div>
      <div>
        Корсак — хищное млекопитающее рода лисиц.
      </div>
      <div>
        Лисица — хищное млекопитающее семейства псовых,
        наиболее распространённый и самый крупный вид рода
        лисиц.
      </div>
    </div>
  </body>
</html>

Примечание

Safari до версии 9 поддерживает свойство -webkit-align-items.

См. также

  • Свойство align-self

Выравнивание элементов. align-items и align-self ⚡️ HTML и CSS с примерами кода

Свойство align-items

Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:

  • stretch: значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера
  • flex-start: элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера
  • flex-end: элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера
  • center: элементы выравниваются по центру flex-контейнера
  • baseline: элементы выравниваются в соответствии со своей базовой линией

Выравнивание при расположении в строку:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox в CSS3</title>
    <style>
      .
 
 flex-container {
        display: flex;
        border: 1px #ccc solid;
        height: 5em;
      }
      .flex-start {
        align-items: flex-start;
      }
      .flex-end {
        align-items: flex-end;
      }
      .center {
        align-items: center;
      }
      .baseline {
        align-items: baseline;
      }
      .flex-item {
        text-align: center;
        font-size: 1em;
        padding: 1.2em;
        color: white;
      }
      .largest-item {
        padding-top: 2em;
      }
      .color1 {
        background-color: #675ba7;
      }
      .color2 {
        background-color: #9bc850;
      }
      .color3 {
        background-color: #a62e5c;
      }
      .color4 {
        background-color: #2a9fbc;
      }
    </style>
  </head>
  <body>
    <h4>Flex-start</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
    <h4>Flex-end</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
    <h4>Center</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
    <h4>Baseline</h4>
    <div>
      <div>Flex Item 1</div>
      <div>
        Flex Item 2
      </div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
  </body>
</html>

Аналогично свойство работает при расположении в столбик.

Например, изменим стили flex-контейнера следующим образом:

.flex-container {
  display: flex;
  border: 1px #ccc solid;
  flex-direction: column;
  width: 12em;
}

Свойство align-self

Свойство align-self позволяет переопределить значение свойства align-items для одного элемента. Оно может принимать все те же значения плюс значение auto:

  • auto: значение по умолчанию, при котором элемент получает значение от свойства align-items, которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение stretch.
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox в CSS3</title>
    <style>
      .flex-container {
        display: flex;
        border: 1px #ccc solid;
        justify-content: space-between;
        align-items: stretch;
        height: 12em;
      }
      .
  flex-item {
        text-align: center;
        font-size: 1em;
        padding: 1.2em;
        color: white;
      }
      .item1 {
        background-color: #675ba7;
        align-self: center;
      }
      .item2 {
        background-color: #9bc850;
        align-self: flex-start;
      }
      .item3 {
        background-color: #a62e5c;
        align-self: flex-end;
      }
      .item4 {
        background-color: #2a9fbc;
        align-self: center;
      }
    </style>
  </head>
  <body>
    <h4>Align-self</h4>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
  </body>
</html>

Здесь для flex-контейнера задано растяжение по высоте с помощью значения align-items: stretch;. Однако каждый из элементов переопределяет это поведение:

См. также

  • align-items
  • align-self

Все, что вам нужно знать о выравнивании во Flexbox — Smashing Magazine

  • 13 минут чтения
  • CSS, Макеты, флексбокс, Руководства
  • Поделиться в Twitter, LinkedIn
Об авторе

Рэйчел Эндрю — веб-разработчик, писатель и спикер.

Она является автором ряда книг, в том числе The New CSS Layout. Она одна из тех, кто стоит за… Больше о Рэйчел ↬

В этой статье мы рассмотрим свойства выравнивания во Flexbox, а также обнаружим некоторые основные правила, которые помогут запомнить, как работает выравнивание как по главной, так и по поперечной оси.

В первой статье этой серии я объяснил, что происходит, когда вы объявляете display: flex для элемента. На этот раз мы рассмотрим свойства выравнивания и то, как они работают с Flexbox. Если вы когда-нибудь не могли понять, когда выравнивать, а когда оправдывать, я надеюсь, что эта статья прояснит ситуацию!

История выравнивания Flexbox

За всю историю CSS Layout возможность правильно выровнять элементы по обеим осям казалась действительно самой сложной проблемой в веб-дизайне. Таким образом, возможность правильно выравнивать элементы и группы элементов была для многих из нас самой интересной особенностью Flexbox, когда он впервые появился в браузерах. Выравнивание стало таким же простым, как две строки CSS:

См. Pen Smashing Flexbox Series 2: отцентрируйте элемент Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Smashing Flexbox Series 2: центрируйте элемент Рэйчел Эндрю (@rachelandrew) на CodePen.

Свойства выравнивания, которые вы могли бы назвать свойствами выравнивания flexbox, теперь полностью определены в спецификации выравнивания Box. В этой спецификации подробно описывается, как работает выравнивание в различных контекстах макета. Это означает, что мы можем использовать те же свойства выравнивания в CSS Grid, что и во Flexbox, а в будущем и в других контекстах макета. Таким образом, любая новая возможность выравнивания для flexbox будет подробно описана в спецификации Box Alignment, а не в будущем уровне Flexbox.

Еще после прыжка! Продолжить чтение ниже ↓

Свойства

Многие люди говорят мне, что им трудно вспомнить, использовать ли свойства, которые начинаются с align- или те, которые начинаются с justify- во flexbox. Следует помнить, что:

  • justify- выполняет выравнивание по главной оси. Выравнивание в том же направлении, что и ваше flex-direction
  • align- выполняет выравнивание поперек оси. Выравнивание по направлению, определенному flex-направление .

Здесь действительно помогает мышление с точки зрения главной оси и поперечной оси, а не горизонтальной и вертикальной. Не имеет значения, в каком направлении находится ось физически.

Выравнивание по главной оси С

justify-content

Мы начнем с выравнивания по главной оси. По главной оси мы выравниваем с помощью свойства justify-content . Это свойство работает со всеми нашими гибкими элементами как с группой и управляет распределением пространства между ними.

Начальное значение justify-content равно flex-start . Вот почему, когда вы объявляете display: flex , все ваши flex-элементы выстраиваются напротив начала flex-линии. Если у вас есть flex-direction из row и вы используете язык слева направо, например английский, то элементы будут начинаться слева.

Элементы выстраиваются в линию до начала (Большой предварительный просмотр)

Обратите внимание, что свойство justify-content может делать только что-то , если есть свободное место для распространения . Поэтому, если у вас есть набор гибких элементов, которые занимают все пространство на главной оси, использование justify-content ничего не изменит.

Нет места для распространения (Большой предварительный просмотр)

Если мы присвоим justify-content значение flex-end , то все элементы будут перемещены в конец строки. Свободное пространство теперь помещается в начало.

Элементы выстраиваются в конце (большой предварительный просмотр)

Мы можем делать другие вещи с этим пространством. Мы могли бы попросить его распространить между нашими гибкими элементами, используя justify-content: space-between . В этом случае первый и последний элемент будут на одном уровне с концами контейнера, и все пространство будет поровну разделено между элементами.

Свободное пространство распределяется между элементами (большой предварительный просмотр)

Мы можем попросить, чтобы пространство было распределено вокруг наших гибких элементов, используя justify-content: space-around . В этом случае доступное пространство делится и размещается с каждой стороны элемента.

Элементы имеют пространство по обеим сторонам от них (предварительный просмотр большого размера)

Более новое значение justify-content можно найти в спецификации выравнивания блока; его нет в спецификации Flexbox. Это значение равно space-evenly . В этом случае предметы будут равномерно распределены в контейнере, а дополнительное пространство будет разделено между предметами и обеими сторонами.

Элементы расположены равномерно (большой предварительный просмотр)

Вы можете поиграть со всеми значениями в демоверсии:

См. Pen Smashing Flexbox Series 2: justify-content with flex-direction: row Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Smashing Flexbox Series 2: justify-content with flex-direction: row Рэйчел Эндрю (@rachelandrew) на CodePen.

Эти значения работают одинаково, если ваш flex-direction равен столбцу . Однако у вас может не быть дополнительного места для распределения в столбце, если вы не добавите высоту или размер блока в flex-контейнер, как в следующей демонстрации.

См. колонку Pen Smashing Flexbox Series 2: justify-content with flex-direction: Рэйчел Эндрю (@rachelandrew) на CodePen.

См. колонку Pen Smashing Flexbox Series 2: justify-content with flex-direction: Рейчел Эндрю (@rachelandrew) на CodePen.

Выравнивание по поперечной оси с помощью

align-content

Если вы добавили flex-wrap: оберните в свой flex-контейнер и у вас есть несколько flex-линий, вы можете использовать align-content для выравнивания flex-линий по пересечению ось. Однако для этого потребуется дополнительное пространство на поперечной оси. В приведенной ниже демонстрации моя поперечная ось проходит в направлении блока в виде столбца, и я установил высоту гибкого контейнера на 9.0015 60вх . Поскольку это больше, чем необходимо для отображения моих гибких элементов, у меня есть свободное место по вертикали в контейнере.

Затем я могу использовать align-content с любым из значений:

См. Pen Smashing Flexbox Series 2: align-content with flex-direction: row Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Smashing Flexbox Series 2: align-content with flex-direction: row Рэйчел Эндрю (@rachelandrew) на CodePen.

Если мой flex-направление были столбцом , тогда align-content будет работать, как в следующем примере.

См. колонку Pen Smashing Flexbox Series 2: align-content with flex-direction: Рэйчел Эндрю (@rachelandrew) на CodePen.

См. колонку Pen Smashing Flexbox Series 2: align-content with flex-direction: Рейчел Эндрю (@rachelandrew) на CodePen.

Как и в случае с justify-content , мы работаем со строками как с группой и распределяем свободное пространство.

The

place-content Сокращение

В Box Alignment мы находим сокращение place-content ; использование этого свойства означает, что вы можете установить justify-content и align-content одновременно. Первое значение для

align-content , второе для justify-content . Если вы установите только одно значение, то оба значения будут установлены на это значение, поэтому:

 .container {
    Place-Content: пробел между Stretch;
}

То же, что:

 .контейнер {
    выравнивание содержимого: пробел между;
    выравнивание содержимого: растянуть;
}

Если мы использовали:

 . container {
    место-содержание: пространство-между;
}

Это будет то же самое, что:

 .container {
    выравнивание содержимого: пробел между;
    выравнивание содержимого: пробел между;
}

Выравнивание по поперечной оси с помощью

align-items

Теперь мы знаем, что можем выровнять наш набор flex-элементов или наши flex-линии как группу. Однако есть и другой способ, которым мы могли бы захотеть выровнять наши элементы, а именно выровнять элементы относительно друг друга на поперечной оси. Ваш гибкий контейнер имеет высоту. Эта высота может определяться высотой самого высокого предмета, как на этом изображении.

Высота контейнера определяется третьим элементом (Большой предварительный просмотр)

Вместо этого она может быть определена путем добавления высоты к гибкому контейнеру:

Высота определяется размером гибкого контейнера (Большой предварительный просмотр)

Причина, по которой flex элементы растягиваются до размера самого высокого элемента, заключается в том, что начальное значение align-items равно stretch . Элементы растягиваются по поперечной оси, чтобы соответствовать размеру гибкого контейнера в этом направлении.

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

В дополнение к начальному значению stretch вы можете присвоить align-items значение flex-start , и в этом случае они выравниваются по началу контейнера и больше не растягиваются по высоте.

Элементы, выровненные по началу поперечной оси (Большой предварительный просмотр)

Значение flex-end перемещает их в конец контейнера по поперечной оси.

Элементы, выровненные по концу поперечной оси (большой предварительный просмотр)

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

Центрирование элементов на поперечной оси (большой предварительный просмотр)

Мы также можем сделать базовое выравнивание. Это гарантирует выравнивание базовых линий текста, а не выравнивание блоков вокруг содержимого.

Выравнивание базовых линий (Большой предварительный просмотр)

Вы можете попробовать эти значения в демоверсии:

См. Pen Smashing Flexbox Series 2: align-items Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Smashing Flexbox Series 2: align-items Рэйчел Эндрю (@rachelandrew) на CodePen.

Индивидуальное выравнивание С

align-self

Свойство align-items означает, что вы можете установить выравнивание всех элементов одновременно. Что это действительно делает, так это устанавливает все значения align-self для отдельных flex-элементов как группу. Вы также можете использовать align-self для любого отдельного элемента гибкости, чтобы выровнять его внутри линии гибкости и относительно других элементов гибкости.

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

См. Pen Smashing Flexbox Series 2: align-self Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Smashing Flexbox Series 2: align-self Рэйчел Эндрю (@rachelandrew) на CodePen.

Почему нет

оправдания ?

Распространенный вопрос: почему невозможно выровнять один элемент или группу элементов по главной оси. Почему в Flexbox нет свойства -self для выравнивания по главной оси? Если вы думаете о justify-content и align-content как о распределении пространства, причина того, что они не являются самовыравнивающимися, становится более очевидной. Мы имеем дело с гибкими элементами как с группой и каким-то образом распределяем доступное пространство — либо в начале, либо в конце группы, либо между элементами.

Если также полезно подумать о том, как justify-content и align-content работают в CSS Grid Layout. В Grid эти свойства используются для распределения свободного пространства в контейнере сетки между дорожками сетки. Опять же, мы берем дорожки как группу, и эти свойства дают нам способ распределить любое дополнительное пространство между ними. Поскольку мы работаем с группой как в Grid, так и во Flexbox, мы не можем настроить таргетинг на отдельный элемент и сделать с ним что-то другое. Тем не менее, есть способ добиться того макета, который вы просите, когда запрашиваете свойство self на главной оси, а именно использовать автоматические поля.

Использование автоматических полей на главной оси

Если вы когда-либо центрировали блок в CSS (например, оболочку для содержимого главной страницы, установив поля слева и справа от auto ), то у вас уже есть некоторый опыт как ведут себя автоматические поля. Поле, установленное на auto, попытается стать настолько большим, насколько это возможно, в том направлении, в котором оно было установлено. В случае использования полей для центрирования блока мы устанавливаем для левого и правого обоих значения auto; каждый из них пытается занять как можно больше места и таким образом толкает наш блок в центр.

Автоматические поля очень хорошо работают во Flexbox для выравнивания отдельных элементов или групп элементов на главной оси. В следующем примере я добиваюсь общего шаблона проектирования. У меня есть панель навигации с использованием Flexbox, элементы отображаются в виде строки и используют начальное значение justify-content: start . Я хотел бы, чтобы последний элемент отображался отдельно от других в конце гибкой строки — при условии, что в строке достаточно места для этого.

Я нацеливаюсь на этот элемент и задаю ему поле слева от авто. Это означает, что поле пытается получить как можно больше места слева от элемента, что означает, что элемент смещается полностью вправо.

См. Pen Smashing Flexbox Series 2: выравнивание с автоматическими полями Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Smashing Flexbox Series 2: выравнивание с автоматическими полями Рэйчел Эндрю (@rachelandrew) на CodePen.

Если вы используете автоматические поля на главной оси, то justify-content перестанет иметь какой-либо эффект, так как автоматические поля займут все пространство, которое в противном случае было бы назначено с помощью justify-content .

Резервное выравнивание

Каждый метод выравнивания описывает резервное выравнивание, это то, что произойдет, если запрошенное выравнивание не может быть достигнуто. Например, если у вас есть только один элемент во гибком контейнере и вы запрашиваете justify-content: space-between , что должно произойти? Ответ заключается в том, что используется резервное выравнивание flex-start , и ваш отдельный элемент будет выравниваться по началу гибкого контейнера. В случае justify-content: space-around резервное выравнивание используется центр .

В текущей спецификации вы не можете изменить резервное выравнивание, поэтому, если вы предпочитаете, чтобы резервное копирование для space-between было center , а не flex-start , нет способа сделай это. В спецификации есть примечание, в котором говорится, что будущие уровни могут включить это.

Безопасное и небезопасное выравнивание

Более поздним дополнением к спецификации Box Alignment является концепция безопасного и небезопасного выравнивания с использованием безопасные и небезопасные ключевые слова.

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

 .контейнер {
    дисплей: гибкий;
    flex-направление: столбец;
    ширина: 100 пикселей;
    align-items: небезопасный центр;
}
. item:последний ребенок {
    ширина: 200 пикселей;
}
Небезопасное выравнивание даст вам запрашиваемое выравнивание, но может привести к потере данных (большой предварительный просмотр)

Безопасное выравнивание предотвратило бы потерю данных путем перемещения переполнения на другую сторону.

 .контейнер {
    дисплей: гибкий;
    flex-направление: столбец;
    ширина: 100 пикселей;
    align-items: безопасный центр;
}
.item:последний ребенок {
    ширина: 200 пикселей;
}
Безопасное выравнивание пытается предотвратить потерю данных (Большой предварительный просмотр)

В настоящее время эти ключевые слова имеют ограниченную поддержку браузеров, однако они демонстрируют дополнительные возможности управления, предоставляемые Flexbox через спецификацию Box Alignment.

См. серию Pen Smashing Flexbox 2: безопасное или небезопасное выравнивание Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Smashing Flexbox Series 2: безопасное или небезопасное выравнивание Рэйчел Эндрю (@rachelandrew) на CodePen.

Резюме

Свойства выравнивания начинались как список во Flexbox, но теперь они имеют собственную спецификацию и применяются к другим контекстам макета. Несколько ключевых фактов помогут вам запомнить, как использовать их во Flexbox:

  • justify- основная ось и выравнивание- поперечная ось;
  • Чтобы использовать align-content и justify-content , вам нужно свободное место для игры;
  • Свойства align-content и justify-content работают с элементами как с группой, разделяя пространство. Таким образом, вы не можете настроить таргетинг на отдельный элемент, поэтому для этих свойств нет выравнивания -self ;
  • Если вы хотите выровнять один элемент или разделить группу по главной оси, используйте для этого автоматические поля;
  • Свойство align-items устанавливает все значения align-self как группу. Используйте align-self на дочернем элементе flex, чтобы установить значение для отдельного элемента.

Vuetify — платформа компонентов Vue

Управляйте компоновкой flex-контейнеров с помощью выравнивания, выравнивания и многого другого с помощью гибких утилит flexbox.

#Включение flexbox

С помощью утилит display вы можете превратить любой элемент в контейнер flexbox, трансформируя прямые дочерние элементы во flex-элементы. Используя дополнительные утилиты свойств flex, вы можете еще больше настроить их взаимодействие.

Вы также можете настроить гибкие утилиты для применения на основе различных точек останова.

  • .D-FLEX
  • . D-INLINE-FLEX
  • .D-SM-FLEX
  • .D-SM-INLINE-FLEX
  • .D-MD-FLEX.
  • .d-md-inline-flex
  • . d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline

#caveats

5

#caveats

#caveats

#Caveats

IT важно отметить, что использование любого из вышеперечисленных классов отображения приведет к тому, что любой ранее добавленный стиль отображения будет перезаписан. Это связано с тем, что классы используют !important в стиле отображения.

#Flex direction

По умолчанию применяется d-flex flex-direction: строка и обычно может быть опущена. Однако могут быть ситуации, когда вам нужно явно определить его.

Вспомогательные классы flex-column и flex-column-reverse можно использовать для изменения ориентации контейнера flexbox.

Существуют также адаптивные варианты для flex-direction .

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • . Flex-Column-Reverse
  • .FLEX-SM-ROW
  • .FLEX-SM-ROW-Reverse
  • . Flex-SM-CLUMN
  • .FLEAL-SM. -column-reverse
  • .FLEX-MD-ROW
  • . FLEX-MD-ROW-ROW AVERAXER
  • .FLEX-MD-Column
  • .FLEX-MD-COLUNM-MDAVER
    • 4
  • .FLEX-MD-COLUND-SLUMN
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .FLEX-LG-COLUNM
  • .FLEX-LG-Column-Reverse
  • .FLEX-XL-ROW
  • .FLEX-XL-ROW-REAVE xl-column
  • .flex-xl-column-reverse

#Flex justify

Настройка justify-content flex может быть изменена с помощью классов flex justify. По умолчанию это изменит элементы flexbox на оси x , но будет изменено при использовании flex-direction: столбец , изменение оси Y . Выберите из start (браузер по умолчанию), end , center , space-between , space-around или space-evenly .

Существуют также адаптивные варианты для justify-content .

  • .justify-start
  • .justify-end
  • .justify-center
  • .justify-space-between
  • . Justify-around
  • . Justify-Space-Evenly
  • . Justify-SM-Start
  • . Justify-SM-end
    • 9003 9003.
  • . Justify-SM-Space-Between
  • . Justify-SM-Around
  • . Justify-SM-Space-Evenly
  • . Justify-Md-Start-Start
  • . Justify-Md-Start-Start
  • . Justify-Start-Start
  • 9
  • . Justify-Sm. .justify-md-end
  • .justify-md-center
  • . Justify-MD-Space-Between
  • . Justify-MD-космос
  • . Justify-MD-Space-Evenly
  • . Justify-Start

  • . Justify-Start

  • . Justify-Start
  • 9
  • . Justify-Start
  • 9
  • . .justify-lg-end
  • .justify-lg-center
  • .justify-lg-space-between
  • .justify-lg-space-around

  • -равномерно

  • .justify-xl-start
  • . Justify-xl-end
  • . Justify-xl-Center
  • . Justify-xl-Space-BetSe-Bethen
  • . Justify-xl-Around-Around
    • . -space-evenly

#Flex align

Настройка align-items flex может быть изменена с помощью классов flex align. По умолчанию это изменит элементы flexbox на оси Y , но будет изменено при использовании flex-direction: столбец , изменяя ось x . Выберите из start , end , center , baseline или stretch (браузер по умолчанию).

Существуют также адаптивные варианты для align-items .

  • . Align-Start
  • . Align-end
  • . Alight-Center
  • . Align-Baseline
  • . ALIGN-STRETCH
  • . ALIGN-STRETCH
    • .
  • . Align-SM-end
  • . Align-SM-Center
  • . Align-SM-Baseline
  • . Align-Sm-Shretch
  • .
  • . Align-MD-end
  • . Align-MD-Center
  • . Align-MD-Baseline
  • . Align-MD-STRETH
  • .
  • .align-lg-end
  • .align-lg-center
  • . Align-LG-Baseline
  • . Align-LG-стрич
  • . Align-xl-Start
  • .
  • .align-xl-baseline
  • .align-xl-stretch

#Flex align self

Параметр align-self может быть изменен с помощью классов .flex align-self . Это по умолчанию изменит отдельные элементы flexbox в ось y , но меняется на обратную при использовании flex-direction: column , изменяя ось x . Выберите из start , end , center , baseline , stretch или auto (браузер по умолчанию, применяет свойство align-items из flex-контейнера).

Существуют также адаптивные варианты для align-self-items .

  • .align-self-start
  • .align-self-end
  • . Альтинг-сельский центр
  • . Альбук-салфетка
  • . Альгнезан-ауто
  • . ЗАКРЫТИЯ СПАКА
  • .ALIGN-SMEL-SMELTECH
  • .ALIGN-SMEL-SMELCH-SLETCH
  • .ALIGN-SMEL-SMEL-SMELCH-STRETCH -start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-stretch
  • .align-self-md-start
  • . align-self-md-end
  • .align-self-md-stretch
  • .align-self-lg-baseline
  • .align-self-lg-auto
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • align-self-xl-baseline
  • .align-self-xl-auto
  • .align-self-xl-stretch

#Auto margins

Использование вспомогательных классов контейнера margin flexbox в вы можете управлять позиционированием flex-элементов по оси x или ось Y при использовании flex-row или flex-column соответственно.

#Using align-items

Смешивание flex-direction: column и align-items , вы можете использовать вспомогательные классы .mt-auto и . mb-auto для настройки позиционирования flex-элементов.

#Flex wrap

По умолчанию .d-flex не обеспечивает переноса (ведет себя аналогично flex-wrap: nowrap ). Это можно изменить, применив вспомогательные классы flex-wrap в формате 9.0015 flex-{condition} , где условие может быть nowrap , wrap или wrap-reverse .

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse

. для создания более отзывчивых вариантов на основе контрольных точек. Доступны следующие комбинации:

  • .flex-sm-nowrap
  • .FLEX-SM-WRAP
  • .FLEX-SM-WRAP-Reverse
  • .FLEX-MD-NOWRAP
  • .FLEX-MD-WRAP
    • 95.FLEX-MD-MD-MD-WRAP
  • . -Врап-версия
  • . FLEX-LG-NOWRAP
  • .FLEX-LG-WRAP
  • .FLEX-LG-WRAP-REVEXEM
  • .FLEX-XL-NOWRAP
  • . .flex-xl-wrap
  • .flex-xl-wrap-reverse

#Flex order

Вы можете изменить визуальный порядок flex-элементов с помощью утилит order .

Существуют также адаптивные варианты для заказа .

  • . Порядок-первой
  • . Определение-0
  • . Порядок-1
  • . Определение 2
  • . Орден-3
  • .
  • .заказ-5
  • .заказ-6
  • . Порядок-7
  • . Порядок-8
  • . Порядок-9
  • . Порядок-10
  • . . порядка Last
  • . Dorder-SM-First
  • . Dorder-SM-0
  • . Dorder-SM-1
  • . -sm-3
  • .заказ-sm-4
  • . Порядок-SM-5
  • . Определение-SM-6
  • . Порядок-SM-7
  • . Порядок-SM-8
  • . . Порядок-SM-10
  • . Определение-SM-11
  • . Порядок-SM-12
  • . Dorder-SM-Last
  • . Dorder-MD-First
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • . Определение-мд-3
  • . Определение-МД-4
  • . ОРУЖКА-МД-5
  • . ОРУСА-МД-6
  • . ОТРАЖДЕНИЕ-МД-7 .
  • . Определение-МД-8
  • . Определение-МД-9
  • . ОРУЖНЕЙ МД-10
  • . ОРУСА-МД-11
  • . Определение-МД-12 .
  • .order-md-last
  • .order-lg-first
  • .order-lg-0
  • . Порядок-LG-1
  • . Dorder-LG-2
  • . Определение-LG-3
  • .Order-LG-4
  • .
  • . Определение-LG-6
  • . Dorder-LG-7
  • . Dorder-LG-8
  • .
  • .order-lg-11
  • .order-lg-12
  • .order-lg-last
  • . Dorder-xl-First
  • . Dorder-XL-0
  • . Dorder-XL-1
  • . DORD-XL-2
  • .
  • . Dorder-XL-4
  • . Dorder-XL-5
  • . Dorder-XL-6
  • . Dord-xl-7
  • .
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12
  • .order-xl-last

#Flex align content

align-content можно изменить с помощью классов настроек flex. По умолчанию это изменит обернутое содержимое flexbox по оси Y , но будет изменено при использовании flex-direction: column , изменяя ось x . Выберите из начало , конец , центр , пробел-между , пробел-вокруг , пробел-равномерно или растянуть (браузер по умолчанию).

Существуют также адаптивные варианты для align-content .

  • Align-Content-Start
  • Align-Content-end
  • Align-Content-Center
  • Align-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space-Space.
  • выравнивание содержимого по пространству равномерно
  • align-content-stretch
  • align-content-sm-start
  • align-content-sm-end
  • align-content-sm-center
  • align-content- sm-space-between
  • align-content-sm-space-around
  • align-content-sm-space-evenly
  • align-content-sm-content-stretch 7
  • 9
    • md-start
  • выравнивание содержимого-md-end 9
  • align-content-md-stretch
  • align-content-lg-start
  • align-content-lg-end
  • align-content-lg-center
  • align- контент-lg-пробел-между
  • align-content-lg-space-around
  • align-content-lg-space-evenly
  • align-content-lg-stretch
  • align-content-xl-start

    -content-xl-end

  • align-content-xl-center
  • align-content-xl-space-between
  • align-content-xl-content-space-around
  • 9 -xl-space-evenly
  • align-content-xl-stretch

#Flex увеличение и уменьшение

Vuetify имеет вспомогательные классы для применения увеличения и уменьшения вручную. Их можно применить, добавив вспомогательный класс в формате flex-{условие}-{значение} , где условие может быть либо , рост , либо , сжатие , а значение может быть либо 0 , либо 1 . Условие "вырасти" позволит элементу увеличиться, чтобы заполнить доступное пространство, тогда как "сжать" позволит элементу уменьшиться только до места, необходимого для его содержимого. Однако это произойдет только в том случае, если элемент должен сжаться, чтобы соответствовать своему контейнеру, например, при изменении размера контейнера или при воздействии flex-grow-1 . Значение 0 предотвратит возникновение условия, тогда как 1 разрешит его. Доступны следующие классы:

  • Flex-R-0
  • Flex-Grow-1
  • Flex-Shrink-0
  • Flex-Shrink-1

Классы также может применяться в формате flex-{точка останова}-{условие}-{состояние} для создания более гибких вариантов на основе точек останова.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *