Align content css: align-items | CSS-Tricks

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

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

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

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

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

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

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

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

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

И 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. Надеюсь это поможет 🙂

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

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

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

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

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

Синтакс

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

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

Переглядачі

Приклади

Приклад дії різних значень властивості 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 



   дисплей: 
  <выбор>
     гибкий 
     сетка 
  



   align-content: 
  <выбор>
     нормальный 
     растянуть 
     гибкий запуск 
     flex-end 
     center 
     space-between 
     ​​space-around 
     space-evenly 

     начало 
     конец 
     left 
     right 

     базовый план 
     первый базовый уровень 
     последняя базовая линия 

     безопасный центр 
     небезопасный центр 
     безопасное право 
     небезопасное право 
     безопасный конец 
     небезопасный конец 
     безопасный flex-end 
     небезопасный flex-end 
  

  

Результат

Поддержка в макете 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.

No related posts.