Содержание

CSS align content



Пример

Линии упаковки к центру контейнера Flex:

div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}


Определение и использование

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

Примечание: Должно быть несколько строк элементов для этого свойства, чтобы иметь какой-либо эффект!

Совет: Используйте justify-content для выравнивания элементов на главной оси (горизонтально).

Значение по умолчанию: Стрейч
Inherited: no
Animatable: no. Читайте о animatable
Version:
CSS3
Синтаксис JavaScript: object. style.alignContent=»center»

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

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера следуют-WebKit-укажите первую версию, которая работала с префиксом.

Свойство
align-content 21.0 11.0 28.0 9.0
7.0 -webkit-
12.1


Синтаксис CSS

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Значения свойств

Значение Описание
stretch Значение по умолчанию. Линии тянутся, чтобы занять оставшееся пространство
center Линии упакованы в направлении центра контейнера Flex
flex-start Линии упакованы к началу контейнера Flex
flex-end Линии упакованы к концу контейнера Flex
space-between Линии равномерно распределяются в контейнере Flex
space-around Линии равномерно распределяются в контейнере Flex, с половиной размера пространств на любом конце
initial Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit Наследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

CSS Справка: align-items Свойство

CSS Справка: align-self Свойство

CSS Справка: justify-content Свойство

HTML DOM Справочник: alignContent Свойство


Выравнивание элементов. align-items и align-self

Содержание
  1. Что такое Flexbox. Flex Container
  2. Макет страницы на Flexbox
  3. Направление flex-direction
  4. flex-wrap
  5. flex-flow. Порядок элементов
  6. Выравнивание элементов. justify-content
  7. Выравнивание элементов. align-items и align-self
  8. Выравнивание строк и столбцов. align-content
  9. Управление элементами. flex-basis, flex-shrink и flex-grow
  10. Многоколоночный дизайн на Flexbox

Свойство 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;. Однако каждый из элементов переопределяет это поведение:

См. также

Разница между justify-content и align-content



Я использую как justify-content, так и align content в flexbox. в чем разница между ними????

html css flexbox
Поделиться Источник
Nirmal     14 июля 2017 в 13:54

1 ответ


  • justify-content: space-between vs flex-grow to align content

    У меня есть верхняя горизонтальная Навигация, которую я использую правило css flexbox для управления расстоянием. Я хотел бы, чтобы первый пункт меню был выровнен слева, последний пункт-справа, а расстояние между rest пунктами было равным. Возможно ли это? Я думал, что justify-content:…

  • В чем разница между margin:auto и justify-content / align-items center?

    Чтобы центрировать как горизонтально, так и вертикально одновременно, есть два простых варианта: Первый . outer { display:flex; } .inner { margin:auto; } Второй .outer { display: flex; justify-content: center; align-items: center; } Какая разница? В каких ситуациях мы будем использовать одно над…



16

Justify-content: свойство justify-content выравнивает содержимое сгибаемого контейнера по главной оси, которая по умолчанию(в случае web) является горизонтальной осью.

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

Для получения дополнительной информации об этом посетите эту ссылку- https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Поделиться LogicalDesk     14 июля 2017 в 14:03


Похожие вопросы:


Чего достигают «flex» и «justify-content», чего не достигают «text-align»?

Эти два способа, чтобы переместить кнопку справа от его родителей, кажется, совершенно равнозначно для меня. Есть ли причина предпочесть одно другому? Существуют ли обстоятельства, при которых flex…


Почему игнорируются элементы justify-content и align-items?

В приведенном ниже фрагменте кода, почему justify-content и align-items не имеют никакого эффекта? Я бы ожидал, что столбец будет центрирован внутри содержащего его ящика, а дополнительное…


Как оправдать один элемент flexbox (override justify-content)

Вы можете переопределить align-items с помощью align-self для элемента flex. Я ищу способ, чтобы переопределить justify-content для гибкого элемента. Если у вас есть контейнер flexbox с…


justify-content: space-between vs flex-grow to align content

У меня есть верхняя горизонтальная Навигация, которую я использую правило css flexbox для управления расстоянием. Я хотел бы, чтобы первый пункт меню был выровнен слева, последний пункт-справа, а…


В чем разница между margin:auto и justify-content / align-items center?

Чтобы центрировать как горизонтально, так и вертикально одновременно, есть два простых варианта: Первый . outer { display:flex; } .inner { margin:auto; } Второй .outer { display: flex;…


justify-content и align-content не работают в сетке CSS

У меня есть сетка с 3 строками, 1 столбцом и элементом средней строки — это сама сетка из 2 столбцов и 4 строк. CSS фрагмент .css-grid-container-common-styles{ height:100vh; /*???*/ display: grid;…


Имеет ли смысл использовать «базовое» значение с `justify-content`, `justify-items` или `justify-self` в CSS Flex/Grid?

MDN align-content , justify-content и justify-items описывают baseline как одно из их возможных значений. Хотя baseline имеет смысл , когда используется с align-items или align-self , я не понимаю ,…


CSS justify-content: пробел между IE11 работает неправильно

В моем проекте у меня есть progressbar, и он отлично работает во всех браузерах, кроме IE11 (<11 я не поддерживаю). Во всех браузерах это выглядит так: А в IE11 это выглядит так: я не знаю,. ..


Почему я не могу объединить justify-content-center и justify-content-lg-left в Bootstrap 4?

У меня есть Bootstrap 4 Jumbotron , содержащий столбец, установленный на разной ширине сетки в зависимости от точки останова. Это здорово , но я также хочу установить столбец влево или в центр…


Bootstrap 4: разница между text-center и justify-content-center

И text-center, и justify-content-center, похоже, делают почти одно и то же — центрируют текст. Но какая разница?

наглядное введение в систему компоновки элементов на веб-странице

CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. О самой технологии пишут здесь. Мы же решили объяснить возможности CSS Flexbox с использованием гифок.

Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.

1

display: flex

Есть страница:

На ней размещено 4 div разных размеров, которые находятся внутри серого div. У каждого div есть свойство display: block. Поэтому каждый блок занимает всю ширину строки. Чтобы начать работать с CSS Flexbox, нужно сделать контейнер flex-контейнером. Делается это так:

#container {
  display: flex;
}

Так у блоков появилось свойство flex-контекст, которое в дальнейшем позволит ими управлять гораздо проще, чем с использованием стандартного CSS.

2

flex-direction

У flex-контейнера есть две оси: главная и перпендикулярная ей.

По умолчанию все предметы располагаются вдоль главной оси — слева направо. Именно поэтому блоки в предыдущем примере выстроились в линию, когда мы применили display: flex. А вот flex-direction позволяет вращать главную ось.

#container {
  display: flex;
  flex-direction: column;
}

Обратите внимание, что flex-direction: column не выравнивает блоки по оси, перпендикулярной главной. Главная ось сама меняет своё расположение, и теперь направлена сверху вниз.

Есть ещё парочка свойств для flex-direction: row-reverse и column-reverse.

3

justify-content

Отвечает за выравнивание элементов по главной оси:

#container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

Justify-content может принимать 5 значений:

  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around

Space-between задаёт одинаковое расстояние между блоками, но не между контейнером и блоками. Space-around также задаёт одинаковое расстояние между блоками, но теперь расстояние между контейнером и блоками равно половине расстояния между блоками.

4

align-items

Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси. Вернёмся к flex-direction: row и пройдёмся по командам align-items:

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline

Стоит заметить, что для align-items: stretch высота блоков должна быть равна auto. Для align-items: baseline теги параграфа убирать не нужно, иначе получится так:

Чтобы получше разобраться в том, как работают оси, объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction:

5

align-self

Позволяет выравнивать элементы по отдельности:

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}
// Only this square will be centered.

Для двух блоков применим align-self, а для остальных — align-items: center и flex-direction: row.

6

flex-basis

Отвечает за изначальный размер элементов до того, как они будут изменены другими свойствами CSS Flexbox:

flex-basis влияет на размер элементов вдоль главной оси. Давайте посмотрим, что случится, если мы изменим направление главной оси:

Заметьте, что нам пришлось изменить и высоту элементов: flex-basis может определять как высоту элементов, так и их ширину в зависимости от направления оси.

7

flex-grow

Это свойство немного сложнее. Для начала зададим блокам одинаковую ширину в 120px:

По умолчанию значение flex-grow равно 0. Это значит, что блокам запрещено увеличиваться в размерах. Зададим flex-grow равным 1 для каждого блока:

Теперь блоки заняли оставшееся место в контейнере. Но что значит flex-grow: 1? Попробуем сделать flex-grow равным 999:

И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные. Это значит, что не важно, какое значение у flex-grow, важно, какое оно по отношению к другим блокам:

Вначале flex-grow каждого блока равен 1, в сумме получится 6. Значит, наш контейнер разделён на 6 частей. Каждый блок будет занимать 1/6 часть доступного пространства в контейнере. Когда flex-grow третьего блока становится равным 2, контейнер делится на 7 частей: 1 + 1 + 2 + 1 + 1 + 1. Теперь третий блок занимает 2/7 пространства, остальные — по 1/7. И так далее.

flex-grow работает только для главной оси, пока мы не изменим её направление.

8

flex-shrink

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

Зададим flex-grow и flex-shrink равными 1:

Теперь поменяем значение flex-shrink для третьего блока на 0. Ему запретили сжиматься, поэтому его ширина останется равной 120px:

flex-shrink основывается на пропорциях. То есть, если у первого блока flex-shrink равен 6, а у остальных он равен 2, то, это значит, что первый блок будет сжиматься в три раза быстрее, чем остальные.

9

flex

Заменяет flex-grow, flex-shrink и flex-basis. Значения по умолчанию: 0 (grow) 1 (shrink) auto (basis).

Создадим два блока:

.square#one {
  flex: 2 1 300px;
}
.square#two {
  flex: 1 2 300px;
}

У обоих одинаковый flex-basis. Это значит, что оба будут шириной в 300px (ширина контейнера: 600px плюс margin и padding). Но когда контейнер начнет увеличиваться в размерах, первый блок (с большим flex-grow) будет увеличиваться в два раза быстрее, а второй блок (с наибольшим flex-shrink) будет сжиматься в два раза быстрее:

Ещё больше возможностей свойства вы можете найти в анимированном руководстве по CSS flex​.

10

Дополнительно

Как с CSS Flexbox меняется размер?

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

Немного математики

Начальный размер контейнера: 640px. Вычтем по 20px с каждой стороны для padding, и у нас останется 600px для двух блоков. Когда ширина контейнера становится равной 430px (потеря в 210px), первый блок (flex-shrink: 1) теряет 70px. Второй блок (flex-shrink: 2) теряет 140px. Когда контейнер сжимается до 340px, мы теряем 300px. Первый блок теряет 100px, второй — 200px. То же самое происходит и с flex-grow.

Если вы также интересуетесь CSS Grid, можете ознакомиться с нашей статьёй, где мы рассматриваем Flexbox и Grid.

Перевод статьи «How Flexbox works — explained with big, colorful, animated gifs»

Префиксы для flexbox CSS (кросбраузерный flexbox) — Блого-дарю

/*********************************

префиксы для flex-контейнера

*********************************/

 

. flex {

display: flex;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

 

display: inline-flex;

display: -webkit-inline-box;

display: -webkit-inline-flex;

display: -ms-inline-flexbox;

 

flex-direction: column;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

 

flex-wrap: wrap;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

 

flex-flow: column wrap;

-webkit-flex-flow: column wrap;

-ms-flex-flow: column wrap;

 

justify-content: space-between;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

 

align-content: space-around;

-webkit-align-content: space-around;

-ms-flex-line-pack: distribute;

 

align-items: center

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

}

 

/******************************

префиксы для flex-элементов

******************************/

 

. flex-item {

flex-grow: 1;

-webkit-box-flex: 1;

-webkit-flex-grow: 1;

-ms-flex-positive: 1;

 

flex-shrink: 3;

-webkit-flex-shrink: 3;

-ms-flex-negative: 3;

 

flex-basis: 200px;

-webkit-flex-basis: 200px;

-ms-flex-preferred-size: 200px;

 

flex: 1 3 200px;

-webkit-box-flex: 1;

-webkit-flex: 1 3 200px;

-ms-flex: 1 3 200px;

 

align-self: center;

-webkit-align-self: center;

-ms-flex-item-align: center;

 

order: 3;

-webkit-box-ordinal-group: 3;

-webkit-order: 3;

-ms-flex-order: 3;

}

В чем разница между align-content и align-items?

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

  1. Сам гибкий контейнер имеет ограничение по высоте (например, min-height: 60rem) и, таким образом, может стать слишком высоким для его содержимого
  2. Дочерние элементы, заключенные в контейнер, имеют неравномерную высоту

Условие 1 помогает мне понять, что contentозначает относительно его родительского контейнера. Когда содержимое заполнено контейнером, мы не сможем увидеть какие-либо эффекты позиционирования align-content. Только когда у нас есть дополнительное пространство вдоль поперечной оси, мы начинаем видеть его эффект: он выравнивает содержимое относительно границ родительского контейнера.

Условие 2 помогает мне визуализировать эффекты align-items: оно выравнивает элементы относительно друг друга.


Вот пример кода. Исходные материалы взяты из руководства Уэса Боса по CSS Grid (21. Flexbox против CSS Grid)

  <div>
    <div>Short</div>
    <div>Longerrrrrrrrrrrrrr</div>
    <div>💩</div>
    <div>This is Many Words</div>
    <div>Lorem, ipsum.</div>
    <div>10</div>
    <div>Snickers</div>
    <div>Wes Is Cool</div>
    <div>Short</div>
  </div>
.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

. item {
  margin: 10px;
  max-height: 10rem;
}

Пример 1 : Давайте сузим область просмотра так, чтобы содержимое находилось на одном уровне с контейнером. Это когда align-content: flex-start;не имеет эффекта, так как весь блок контента плотно помещается внутри контейнера (нет дополнительного места для перемещения!)

Также обратите внимание на 2-й ряд — посмотрите, как элементы выровнены по центру между собой.

Пример 2 : по мере того, как мы расширяем область просмотра, у нас больше не хватает содержимого, чтобы заполнить весь контейнер. Теперь мы начинаем видеть эффекты align-content: flex-start;—it выравнивает содержимое относительно верхнего края контейнера.


Эти примеры основаны на flexbox, но те же принципы применимы к сетке CSS. Надеюсь это поможет 🙂

Автор: Shan Dou Размещён: 26.12.2018 11:00

css властивість align-content

Ви мусите дозволити Javascript у вашому браузері для оптимальної роботи сайта і відображення розділів повністю.


CSS властивість align-content задає вирівнювання для кожного рядка гумового елемента по перпендикулярній (вертикальній) вісі.

Ця властивість схожа align-items, але замість вирівнювання гнучких елементів, він вирівнює рядки в гнучких елементах. Вона працює як justify-content, але вирівнює не окремі елементи, а цілий рядок у багаторядковому контейнері, якщо є додатковий простір у вертикальному напрямку.

Хоча початково я властивість була створена тільки для гнучких контейнерів, зараз її можна застосовувати і для блокових контейнерів та сіток(CSS Grid).

CSS властивість align-content може приймати 6 різних значень, кожне з яких змінює поведінку цієї властивості. Візуально поведінка змінюється так:

Порада:

Зверни увагу, властивість align-content не буде працювати, якщо гумовий контейнер має тільки один рядок з елементами!

Порада:

Використовуй властивість justify-content для вирівнювання елементів по головній (горизонтальній) вісі.

Нотатка:

Властивість align-content змінює поведінку властивості flex-wrap.

Нотатка:

Значення stretch працює, тільки тоді, коли не вказано висоту дочірнього елемента. Ця властивість дозволяє працювати зі гнучкими, блоковими контейнерами, а також сітками.

Синтакс

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Властивість align-content може отримувати 8 значень:

stretch

Рядки розтягуються, щоб заповнити вільний простір. Без задання.

center

Рядки вирівнюються по центру гумового контейнера.

flex-start

Рядки розташовуються на початку поперечної вісі.

flex-end

Рядки розташовуються з кінця поперечної осі.

space-between

Рядки рівномірно розподіляються в гумовому контейнері. Перший рядок знаходиться на початку контейнера, а останній перебуває в кінці.

space-around

Рядки рівномірно розподілені з рівними відстанями між ними.

Порожній простір перед першим рядком і після останнього рядка дорівнює половині простору між двома сусідніми рядками.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання: stretch
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.alignContent=»center»

Переглядачі

Переглядач
align-content

29. 0

11.0

28.0

9.0

12.1

Переглядач
align-content

4.4

28.0

9.2

Приклади


Приклад дії різних значень властивості align-content

Демонстрація властивості

Приклад роботи властивості

Динамічний приклад

Додаткові посилання

align-content — CSS: каскадные таблицы стилей

Свойство CSS align-content устанавливает распределение пространства между элементами содержимого и вокруг них вдоль поперечной оси гибкого блока или оси блока сетки.

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.

Это свойство не влияет на однострочные гибкие контейнеры (т. Е. С flex-wrap: nowrap ).

 

выровнять контент: центр;
выровнять контент: начало;
выровнять контент: конец;
выровнять контент: гибкий старт;
выровнять контент: гибкий конец;


выровнять контент: нормальный;


выровнять контент: базовая линия;
align-content: первая базовая линия;
align-content: последняя базовая линия;


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


align-content: безопасный центр;
align-content: небезопасный центр;


выровнять контент: наследовать;
выровнять контент: начальный;
выровнять контент: отключено;
  

Значения

начало
Предметы уложены заподлицо друг с другом, вплотную к начальному краю выравнивающего контейнера по поперечной оси.
конец
Предметы уложены заподлицо друг с другом, вплотную к торцу выравнивающего контейнера по поперечной оси.
гибкий старт
Элементы упакованы заподлицо друг с другом, вплотную к краю контейнера для выравнивания, в зависимости от поперечной стороны гибкого контейнера.
Это относится только к элементам гибкого макета. Для элементов, которые не являются дочерними по отношению к гибкому контейнеру, это значение обрабатывается как start .
гибкий конец
Элементы уложены заподлицо друг с другом, вплотную к краю контейнера для выравнивания, в зависимости от поперечной стороны гибкого контейнера.
Это относится только к элементам гибкого макета. Для элементов, которые не являются дочерними по отношению к гибкому контейнеру, это значение обрабатывается как end .
центр
Предметы уложены заподлицо друг с другом в центре выравнивающего контейнера вдоль поперечной оси.
нормальный
Элементы упакованы в их позиции по умолчанию, как если бы значение align-content не было установлено.
базовый план
первый базовый план

последний базовый план
Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего набора базовых линий блока с соответствующей базовой линией в общем первом или последнем наборе базовых линий всех блоков в его группе совместного использования базовых линий.
Резервное выравнивание для первой базовой линии начало , для последней базовой линии конец .
промежуток между
Элементы равномерно распределены в контейнере для выравнивания по поперечной оси. Расстояние между каждой парой соседних элементов одинаковое. Первый элемент находится заподлицо с начальным краем контейнера выравнивания по поперечной оси, а последний элемент находится заподлицо с конечным краем контейнера выравнивания по поперечной оси.
пространство вокруг
Элементы равномерно распределены в контейнере для выравнивания по поперечной оси. Расстояние между каждой парой соседних элементов одинаковое. Пустое пространство перед первым и после последнего элемента равно половине пространства между каждой парой соседних элементов.
равномерно
Элементы равномерно распределены в контейнере для выравнивания по поперечной оси. Расстояние между каждой парой смежных элементов, начальным краем и первым элементом, а также конечным краем и последним элементом, абсолютно одинаково.
растяжка
Если общий размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, любые элементы auto -size увеличиваются одинаково (не пропорционально), при этом соблюдая ограничения, наложенные max-height / max-width (или эквивалентная функциональность), чтобы комбинированный размер точно заполнял контейнер выравнивания вдоль поперечной оси.
сейф
Используется вместе с ключевым словом выравнивания.Если выбранное ключевое слово означает, что элемент выходит за пределы контейнера выравнивания, вызывая потерю данных, элемент вместо этого выравнивается, как если бы режим выравнивания был start .
небезопасно
Используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и того, может ли произойти переполнение, которое вызывает потерю данных, заданное значение выравнивания соблюдается.
  нормальный | <базовая позиция> | <распределение-содержания> | <положение переполнения>? , где  = [first | последний ]? baseline  = пробел между | космическое пространство | равномерно | растянуть <положение-переполнения> = небезопасно | сейф  = center | начало | конец | гибкий старт | flex-end  

CSS

  #container {
  высота: 200 пикселей;
  ширина: 240 пикселей;
  выровнять контент: центр;
  цвет фона: # 8c8c8c;
}

. flex {
  дисплей: гибкий;
  flex-wrap: обертка;
}

.сетка {
  дисплей: сетка;
  сетка-шаблон-столбцы: повтор (автозаполнение, 50 пикселей);
}

div> div {
  размер коробки: рамка-рамка;
  граница: 2px solid # 8c8c8c;
  ширина: 50 пикселей;
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
}

# item1 {
  цвет фона: # 8cffa0;
  минимальная высота: 30 пикселей;
}

# item2 {
  цвет фона: # a0c8ff;
  минимальная высота: 50 пикселей;
}

# item3 {
  цвет фона: # ffa08c;
  минимальная высота: 40 пикселей;
}

# item4 {
  цвет фона: # ffff8c;
  минимальная высота: 60 ​​пикселей;
}

# item5 {
  цвет фона: # ff8cff;
  минимальная высота: 70 пикселей;
}

# item6 {
  цвет фона: # 8cffff;
  минимальная высота: 50 пикселей;
  размер шрифта: 30 пикселей;
}

Выбрать {
  размер шрифта: 16 пикселей;
}

.ряд {
  маржа сверху: 10 пикселей;
}
  

HTML

  
1
2
3
4
5
6
<выбор>
<выбор>

Результат

Поддержка в макете Flex

Таблицы BCD загружаются только в браузере

Поддержка в макете сетки

Таблицы BCD загружаются только в браузере

align-content | CSS-уловки

Свойство align-content является подсвойством модуля «Гибкий макет блока».

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

Обратите внимание, это свойство не действует, если гибкий блок содержит только одну строку.

Свойство align-content принимает 6 различных значений:

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

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

Синтаксис

  align-content: flex-start | гибкий конец | центр | пространство между | космическое пространство | протяжение

. flex-container {
  выровнять контент: пространство вокруг;
}  

Демо

Следующая демонстрация показывает, как строки располагаются в стеке в зависимости от значения `align-content`:

  • Красный список установлен на гибкий старт
  • Желтый список установлен на flex-end
  • Синий список установлен на центр
  • Зеленый список установлен на интервал между
  • Розовый список установлен на пробел вокруг
  • Коричневый список установлен на участок
  Оцените эту ручку! 

Сопутствующие объекты

Другие ресурсы

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

  • (современный) означает последний синтаксис из спецификации (e.грамм. дисплей: гибкий; )
  • (гибрид) означает странный неофициальный синтаксис 2011 года (например, display: flexbox; )
  • (старый) означает старый синтаксис 2009 года (например, display: box; )
Хром Safari Firefox Opera IE Android iOS
21+ (современный)
20- (старый)
3. 1+ (старые) 2-21 (старый)
22+ (новый)
12.1+ (современный) 10+ (гибрид) 2.1+ (старый) 3.2+ (старый)

Браузер Blackberry 10+ поддерживает новый синтаксис.

Для получения дополнительной информации о том, как смешивать синтаксисы, чтобы получить лучшую поддержку браузера, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).

CSS | свойство align-content — GeeksforGeeks

< HTML >

< голова >

< title > свойство align-content title >

< стиль >

.основной контейнер {

дисплей: гибкий;

высота: 400 пикселей;

flex-wrap: пленка;

align-content: center;

цвет фона: зеленый;

}

. дивизион основного контейнера {

цвет фона: # f4f4f4;

ширина: 100 пикселей;

поле: 10 пикселей;

выравнивание текста: по центру;

размер шрифта: 50 пикселей;

}

h3 {

выравнивание текста: по центру;

}

.вундеркинды {

размер шрифта: 40 пикселей;

выравнивание текста: по центру;

цвет: # 009900;

font-weight: жирный;

}

стиль >

голова >

< корпус >

< div class = "geeks" > GeeksforGeeks div >

< h3 > align-content: center; h3 >

< дел класс = «основной контейнер» >

< дел > 1 дел >

< дел > 2 дел >

< дел > 3 дел >

< дел > 4 дел >

< дел > 5 дел >

< дел > 6 дел >

< дел > 7 дел >

< дел > 8 дел >

< дел > 9 дел >

< дел > 10 дел >

дел >

корпус >

html >

align-content · Документы WebPlatform

Резюме

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

Обзорная таблица

Начальное значение
растяжка
Относится к
многострочных гибких контейнеров
Унаследовано
Нет
Медиа
визуальный
Расчетное значение
указанное значение
Анимационный
Нет
Свойство объектной модели CSS
alignContent

Синтаксис

  • align-content: center
  • align-content: flex-end
  • align-content: flex-start
  • align-content: space-around
  • align-content: space-between
  • align-content: stretch
  • flex-line-pack: центр
  • flex-line-pack: распространять
  • flex-line-pack: конец
  • flex-line-pack: оправдать
  • flex-line-pack: начало
  • flex-line-pack: stretch

Значения

гибкий старт
Линии упакованы в сторону начала гибкого контейнера. Край перекрестного начала первой строки в гибком контейнере размещается заподлицо с перекрестным начальным краем гибкого контейнера, а каждая последующая строка размещается заподлицо с предыдущей линией.
гибкий конец
Линии упакованы ближе к концу гибкого контейнера. Край поперечного конца последней строки размещается заподлицо с краем поперечного конца гибкого контейнера, и каждая предыдущая строка размещается заподлицо с последующей линией.
центр
Линии упакованы по направлению к центру гибкого контейнера.Линии в гибком контейнере размещаются заподлицо друг с другом и выровнены по центру гибкого контейнера с равным количеством пустого пространства между краем содержимого с перекрестным началом гибкого контейнера и первой линией в гибком контейнере, а также между перекрестный край содержимого гибкого контейнера и последняя строка гибкого контейнера. (Если оставшееся свободное пространство отрицательное, линии будут одинаково переполняться в обоих направлениях. )
пространство между
Линии равномерно распределены в гибком контейнере.Если оставшееся свободное пространство отрицательно, это значение идентично flex-start . В противном случае поперечный край первой строки в гибком контейнере размещается заподлицо с поперечным краем содержимого гибкого контейнера, поперечный край последней строки в гибком контейнере помещается заподлицо с поперечным край конечного содержимого гибкого контейнера и оставшиеся строки гибкого контейнера распределяются таким образом, чтобы пустое пространство между любыми двумя соседними строками было одинаковым.
космос-вокруг
Линии равномерно распределены в гибком контейнере, с промежутками половинного размера с обоих концов.Если оставшееся свободное пространство отрицательно, это значение идентично center . В противном случае строки в гибком контейнере распределяются таким образом, что пустое пространство между любыми двумя соседними строками одинаково, а пустое пространство перед первой и после последней строк в гибком контейнере составляет половину размера других пустых пространств.
растяжка
Линии растягиваются, чтобы занять оставшееся место. Если оставшееся свободное пространство отрицательно, это значение идентично flex-start .В противном случае свободное пространство делится поровну между всеми линиями, увеличивая их поперечный размер.

Примеры

Интервал между строками в многострочном гибком контейнере. Измените значения в живом примере.

  .container {
    дисплей: гибкий;
    flex-flow: перенос строк;
    выровнять контент: пространство вокруг;
    ширина: 400 пикселей;
    высота: 200 пикселей;
    фон: #CCC;
}

.container div {
    высота: 30 пикселей;
    маржа: 0px;
}

.container .third-item {
  ширина: 160 пикселей;
  фон: # CC3333;
  размер шрифта: 14 пикселей;
}

.container .second-item {
  ширина: 140 пикселей;
  фон: # FFFC33;
}

.container .first-item {
  ширина: 100 пикселей;
  фон: # 3333FF;
}
  

Посмотреть живой пример

Банкноты

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

Связанные спецификации

Модуль макета гибкого блока CSS
Кандидат в рекомендации

См. Также

Статьи по теме

Flexbox

Внешние ресурсы

Также посетите следующие живые демонстрационные сайты:

CSS align-content Свойство

CSS align-content Свойство

Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа посещаемости веб-сайта. Принимаю

Свойство CSS align-content выравнивает линии гибкого контейнера, когда есть доступное пространство по вертикали (по поперечной оси).

Свойство align-content является одним из свойств CSS3.

Когда во флексбоксе только одна строка, это свойство не влияет. Ему нужно несколько строк в гибком контейнере.

Значение «stretch» ​​является значением этого свойства по умолчанию.

Свойство align-content принимает следующие значения:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

Syntax¶

  align-content : flex-start | гибкий конец | центр | пространство между | космическое пространство | растянуть | начальная | наследовать;  

Пример свойства align-content: ¶

  

  
     Название документа 
    <стиль>
      #пример {
        ширина: 70 пикселей;
        высота: 300 пикселей;
        отступ: 0;
        граница: 1px solid # c3c3c3;
        дисплей: -webkit-flex;
        
        -webkit-flex-flow: перенос строк;
        
        -webkit-align-content: stretch;
        
        дисплей: гибкий;
        flex-flow: перенос строк;
        выравнивание содержимого: растянуть;
      }
      #example li {
        ширина: 70 пикселей;
        высота: 70 пикселей;
        стиль списка: нет;
      }
    
  
  
     

Align-content: stretch; пример

Попробуйте сами »

Результат¶

Пример свойства align-content со значением« center »: ¶

  

  
    <стиль>
      #пример {
        ширина: 70 пикселей;
        высота: 300 пикселей;
        отступ: 0;
        граница: 1px solid # c3c3c3;
        дисплей: -webkit-flex;
        
        -webkit-flex-flow: перенос строк;
        
        -webkit-align-content: center;
        
        дисплей: гибкий;
        flex-flow: перенос строк;
        выровнять контент: центр;
      }
      #example li {
        ширина: 70 пикселей;
        высота: 70 пикселей;
        стиль списка: нет;
      }
    
  
  
     

Align-content: center; пример

Попробуйте сами »

Пример свойства align-content со значением« flex-start »: ¶

  

  
    <стиль>
      #пример {
        ширина: 70 пикселей;
        высота: 300 пикселей;
        отступ: 0;
        граница: 1px solid # c3c3c3;
        дисплей: -webkit-flex;
        
        -webkit-flex-flow: перенос строк;
        
        -webkit-align-content: гибкий старт;
        
        дисплей: гибкий;
        flex-flow: перенос строк;
        выровнять контент: гибкий старт;
      }
      #example li {
        ширина: 70 пикселей;
        высота: 70 пикселей;
        стиль списка: нет;
      }
    
  
  
     

Align-content: flex-start; пример

Попробуйте сами »

Пример свойства align-content со значением« flex-end »: ¶

  

  
    <стиль>
      #пример {
        ширина: 70 пикселей;
        высота: 300 пикселей;
        отступ: 0;
        граница: 1px solid # c3c3c3;
        дисплей: -webkit-flex;
        
        -webkit-flex-flow: перенос строк;
        
        -webkit-align-content: гибкий конец;
        
        дисплей: гибкий;
        flex-flow: перенос строк;
        выровнять контент: гибкий конец;
      }
      #example li {
        ширина: 70 пикселей;
        высота: 70 пикселей;
        стиль списка: нет;
      }
    
  
  
     

Align-content: flex-end; пример

Попробуйте сами »

В следующем примере элементы помещаются между строками.

Пример свойства align-content со значением "space-between": ¶

  

  
    <стиль>
      #пример {
        ширина: 70 пикселей;
        высота: 300 пикселей;
        отступ: 0;
        граница: 1px solid # c3c3c3;
        дисплей: -webkit-flex;
        
        -webkit-flex-flow: перенос строк;
        
        -webkit-align-content: пробел между;
        
        дисплей: гибкий;
        flex-flow: перенос строк;
        выровнять контент: пробел между;
      }
      #example li {
        ширина: 70 пикселей;
        высота: 70 пикселей;
        стиль списка: нет;
      }
    
  
  
     

Align-content: space-between; пример

Попробуйте сами »

Результат¶

Еще один пример со значением« пробел вокруг ».Между предметами одинаковое пространство.

Пример свойства align-content со значением «пробел вокруг»: ¶

  

  
    <стиль>
      #пример {
        ширина: 70 пикселей;
        высота: 300 пикселей;
        отступ: 0;
        граница: 1px solid # c3c3c3;
        дисплей: -webkit-flex;
        
        -webkit-flex-flow: перенос строк;
        
        -webkit-align-content: пробел вокруг;
        
        дисплей: гибкий;
        flex-flow: перенос строк;
        выровнять контент: пространство вокруг;
      }
      #example li {
        ширина: 70 пикселей;
        высота: 70 пикселей;
        стиль списка: нет;
      }
    
  
  
     

Align-content: space-around; пример

Попробуйте сами »Ценности


Практикуйте свои знания



Спасибо за отзыв!

Считаете ли вы это полезным? Да Нет


Статьи по теме

Выравнивание элементов и выравнивание содержимого - создание макетов веб-страниц с помощью CSS

https: // vimeo. com / 293173171

Элементы в Flexbox расположены на по горизонтали или по вертикали в зависимости от того, указываете ли вы строку или столбец для гибкого направления. Это «главное» направление - это то, что мы называем главной осью гибких элементов . Таким образом, перпендикулярное направление - это поперечная ось .

  • Если элементы расположены горизонтально в ряд (или ряды), главная ось горизонтальна, а поперечная ось - вертикальна.

  • Если элементы расположены вертикально в столбец (или столбцы), главная ось вертикальна, а поперечная ось - горизонтальна.

Главная и поперечная оси
Выравнивание по главной оси

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

  • flex-start : выровнено в начале контейнера

  • flex-end : выровнено в конце контейнера

  • центр : выровнен по центру контейнера

  • пространство между : элементы распределены по оси (между ними есть пространство)

  • пространство вокруг : элементы распределены по оси, но есть еще пространство по краям

Например:

 . container {
    дисплей: гибкий;
    justify-content: пространство вокруг;
}  

Как насчет того, чтобы протестировать каждое значение, чтобы увидеть, что происходит?

значений justify-content

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

Хотя это может показаться более интуитивным для строк, то же свойство justify-content можно применить и к столбцам Flexbox! Например, посмотрите, как пробел вокруг отображается в столбце:

 .container {
    дисплей: гибкий;
    justify-content: пространство вокруг;
}  
justify-content: space-around в столбце
Выравнивание по поперечной оси

Здесь Flexbox становится немного . .. странным.

Когда мы говорим о выравнивании элементов по поперечной оси, направление, в котором проходит cross direction , зависит от flex-direction. Давайте посмотрим на ту же иллюстрацию, которую мы видели в начале главы:

Осей в Flexbox

Помните:

  • Если элементы расположены горизонтально в ряд (или ряды), главная ось горизонтальна, а поперечная ось - вертикальная.

  • Если элементы расположены вертикально в столбец (или столбцы), главная ось вертикальна, а поперечная ось - горизонтальна.

С помощью свойства align-items мы можем изменить выравнивание элементов по поперечной оси . align-items может принимать следующие свойства:

  • stretch : элементы растягиваются по всей поперечной оси (это значение по умолчанию)

  • flex-start : выровнено в начале контейнера

  • гибкий конец : выровнен по краю контейнера

  • центр : выровнен по центру контейнера

  • базовая линия : выровнена по базовой линии креста ось контейнеров

 . контейнер
    {дисплей: гибкий;
    justify-content: center;
    align-items: center;
}  

Выравнивание элементов по центру (и выравнивание содержимого по центру) означает, что у нас есть как горизонтально, так и вертикально центрированное содержимое! Ого! Вертикальное центрирование особенно сложно в CSS, но Flexbox позволяет легко это сделать. Вот результат:

Вертикальное центрирование
Выравнивание одного элемента

Вы можете даже выровнять один отдельный элемент вместо всей группы, используя свойство align-self .Выровняем последний элемент нашей группы по концу поперечной оси:

  .container div: nth-child (6) {
    align-self: гибкий конец;
}  
Выравнивание отдельного элемента

Помните, поскольку мы говорим о строке, поперечная ось расположена вертикально; поэтому цифра 6 выровнена по низу, а не по правому краю.

Возьмите выравнивание и обоснование содержания для вращения самостоятельно!

https://www.codevolve.com/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=379ad3ea-17e7-453d-8fd9-78546c4dbdf6

  • 90 горизонтальная ось
  • 90 Для горизонтальных рядов
  • 90 Для горизонтального расположения
  • 90 , а поперечная ось - вертикальная.

  • Для вертикального расположения (столбцы): главная ось вертикальна, а поперечная ось - горизонтальна.

  • Используйте justify-content для выравнивания по главной оси.

  • Используйте align-items для выравнивания по поперечной оси.

  • Используйте align-self для выравнивания одного элемента.

  • Помощники CSS Flex - Vuetify

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

    # Включение flexbox

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

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

    • .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-flex

    # Направление изгиба

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

    Служебные классы flex-column и flex-column-reverse можно использовать для изменения ориентации контейнера flexbox. Имейте в виду, что IE11 и Safari могут иметь проблемы с направлением столбцов.

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

    • .flex-row
    • .flex-row-reverse
    • .flex-column
    • .flex-column-reverse
    • .flex-sm-row
    • . flex-sm-row-reverse
    • .flex-sm-column
    • .flex-sm-column-reverse
    • .flex-md-row
    • .flex-md-row-reverse
    • .flex-md-column
    • .flex-md-column-reverse
    • .flex LG-row
    • .flex-lg-row-reverse
    • .flex-lg-column
    • .flex-lg-column-reverse
    • .flex-xl-row
    • .flex-xl-row-reverse
    • .flex-xl-column
    • .flex-xl-column-reverse

    # Flex justify

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

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

    • .justify-start
    • .justify-end
    • .justify-center
    • .justify-space-between
    • .justify-.
    • .justify-. -sm-start
    • .justify-sm-end
    • .justify-sm-center
    • .justify-sm-space-between
    • .justify-sm-space-around
    • .justify-md-start
    • .justify-md-end
    • .justify-md-center
    • .justify-md-space-between
    • .justify-md-space-around
    • 9-000 LG-старт
    • . 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-between
    • .justify-xl-space-around

    # Flex align

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

    При использовании гибкого выравнивания с IE11 вам необходимо задать явную высоту , так как min-height будет недостаточно и приведет к нежелательным результатам.

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

    • .align-start
    • .align-end
    • .align-center
    • .align-baseline
    • .align-stretch
    • -stretch
    • -
    • .align-sm-end
    • .align-sm-center
    • .align-sm-baseline
    • .align-sm-stretch
    • . Startalign-md-md
    • .align-md-end
    • .align-md-center
    • .align-md-baseline
    • .align-md-stretch
    • .align-lg-start
    • . align-lg-end
    • .align-lg-center
    • .align-lg-baseline
    • .align-lg-stretch
    • . align-xl-start
    • . align-xl-end
    • .align-xl-center
    • .align-xl-baseline
    • .align-xl-stretch

    # Flex align self

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

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

    • .align-self-start
    • .align-self-end
    • .align-self-center
    • .align-self-baseline
    • . align-self-auto
    • .align-self-stretch
    • .align-self-sm-start
    • .align-self-sm-end
    • .align-self-sm-center
    • .align-self-sm-baseline
    • .align-self-sm-auto
    • .align-self-sm-stretch
    • .align-self-md-start
    • .align- self-md-end
    • .align-self-md-center
    • .align-self-md-baseline
    • .align-self-md-auto
    • .align-self- md-stretch
    • .align-self-lg-start
    • .align-self-lg-end
    • .align-self-lg-center
    • .align-self-lg-baseline
    • .align-self-lg-auto
    • .align-self-lg-
    • . align- self-xl-start
    • .align-self-xl-end
    • .align-self-xl-center
    • .align-self-xl-baseline
    • .align-self- xl-auto
    • .align-self-xl-stretch

    # Auto margins

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

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

    # Использование align-items

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

    # Flex wrap

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

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

    Эти вспомогательные классы также могут применяться в формате flex- {breakpoint} - {condition} для создания более гибких вариантов на основе точек останова.Доступны следующие комбинации:

    • .flex-sm-nowrap
    • .flex-sm-wrap
    • .flex-sm-wrap-reverse
    • .flex-md-nowrap
    • . flex-md-wrap
    • .flex-md-wrap-reverse
    • .flex-lg-nowrap
    • .flex-lg-wrap
    • -lg-wrap -реверс
    • .flex-xl-nowrap
    • .flex-xl-wrap
    • .flex-xl-wrap-reverse

    # Flex order

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

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

    • .order-first
    • .order-0
    • .order-1
    • .order-2
    • .order-3
    • .order-4
    • .order-5
    • .order-6
    • .order-7
    • .order-8
    • .order-9
    • . order 10
    • .order-11
    • .order-12
    • .order-last
    • .order-sm-first
    • .order-sm-0
    • . заказ-см-1
    • . заказ-см-2
    • .order-sm-3
    • .order-sm-4
    • .order-sm-5
    • .order-sm-6
    • .order-sm-7
    • . order-sm-8
    • .order-sm-9
    • .order-sm-10
    • .order-sm-11
    • .order-sm-12
    • . order-sm-last
    • .order-md-first
    • .order-md-0
    • .order-md-1
    • .order-md-2
    • .order-md-3
    • .order-md-4
    • . order-md-5
    • order-md-6
    • .order-md-7
    • .order-md-8
    • .order-md-9
    • .order-md-10
    • заказ-md-11
    • .order-md-12
    • .order-md-last
    • .order-lg-first
    • .order-lg-0
    • .order-lg-1
    • .order-lg-2
    • .order-lg-3
    • order-lg-4
    • .order-lg-5
    • .order-lg-6
    • .order-lg-7
    • .order-lg-8
    • заказ-LG-9
    • . заказ-LG-10
    • . заказ-LG-11
    • .order-lg-12
    • .order-lg-last
    • . order-lg-first
    • .order-xl-0
    • .order-xl-1
    • order-xl-2
    • .order-xl-3
    • .order-xl-4
    • .order-xl-5
    • .order-xl-6
    • order-xl-7
    • .order-xl-8
    • .order-xl-9
    • .order-xl-10
    • .order-xl-11
    • .order-xl-12
    • .order-xl-last

    # Flex align content

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

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

    • align-content-start
    • align-content-end
    • align-content-center
    • align-content-space-between
    • align-content-space-around
    • align-content-stretch
    • align-sm-content-start
    • align-sm-content-end
    • align-sm-content-center
    • align-sm-content -space-between
    • align-sm-content-space-around
    • align-sm-content-stretch
    • align-md-content-start
    • align-md-content-end
    • align-md-content-center
    • align-md-content-space-between
    • align-md-content-space-around
    • align-md-content-stretch
    • align-lg-content-start 9 0006
    • align-lg-content-end
    • align-lg-content-center
    • align-lg-content-space-between
    • align-lg-content-space-around
    • align-lg-content-stretch
    • align-xl-content-start
    • align-xl-content-end
    • align-xl-content-center
    • align-xl- content-space-between
    • align-xl-content-space-around
    • align-xl-content-stretch

    # Flex grow and shrink

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

    • flex-grow-0
    • flex-grow-1
    • flex-shrink-0
    • flex-shrink-1

    Эти вспомогательные классы могут также может применяться в формате flex- {breakpoint} - {condition} - {state} для создания более гибких вариантов на основе точек останова. Доступны следующие комбинации:

    • flex-sm-grow-0
    • flex-md-grow-0
    • flex-lg-grow-0
    • flex-xl-grow-0
    • flex-sm-grow-1
    • flex-md-grow-1
    • flex-lg-grow-1
    • flex-xl-grow-1
    • flex- sm-shrink-0
    • flex-md-shrink-0
    • flex-lg-shrink-0
    • flex-xl-shrink-0
    • flex-sm-shrink-1
    • flex-md-shrink-1
    • flex-lg-shrink-1
    • flex-xl-shrink-1

    Готовы к большему?

    Продолжайте обучение, просматривая связанный контент, выбранный командой, или перемещайтесь между страницами, используя навигационные ссылки ниже.
    Редактировать эту страницу на GitHub

    Последнее обновление: 19.