Align content css

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

Свойство align-content работает только в случае, если разрешен перенос строк и указано направление flex-flow: row/row-reverse/column/column-reverse wrap/wrap-reverse; и высота flex-контейнера.

CSS синтаксис

Возможные значения


Значение Описание
stretch Значение по умолчанию. Строки флекс-элементов равномерно растягиваются, заполняя все доступное пространство.
center Строки флекс-элементов выравниваются по высоте по середине контейнера относительно его левого края.
flex-start Строки флекс-элементов выравниваются по левому краю контейнера относительно его верхнего края.
flex-end Строки флекс-элементов выравниваются по левому краю контейнера относительно его нижнего края.
space-between Строки флекс-элементов выравниваются по высоте по середине контейнера относительно его левого края. Свободное пространство распределяется между ними. Первый ряд флекс-элементов прижимается к началу контейнера, последний ряд — к нижнему краю.
space-around Строки флекс-элементов равномерно распределяются по высоте, свободное пространство добавляется сверху и снизу строки.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Упаковываем строки в середину флекс-контейнера

 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; }  

msiter.ru

Syntax

/* Basic positi.    
ent: last baseline; /* Distributed alignment */ align-content: space-between; /* Distribute items evenly The first item is flush with the start, the last is flush with the end */ align-content: space-around; /* Distribute items evenly Items have a half-size space on either end */ align-content: space-evenly; /* Distribute items evenly Items have equal space around them */ align-content: stretch; /* Distribute items evenly Stretch 'auto'-sized items to fit the container */ /* Overflow alignment */ align-content: safe center; align-content: unsafe center; /* Global values */ align-content: inherit; align-content: initial; align-content: unset;

Values

start
The items are packed flush to each other toward the start edge of the alignment container in the cross axis.
end
The items are packed flush to each other toward the end edge of the alignment container in the cross axis.
flex-start
The items are packed flush to each other toward the edge of the alignment container depending on the flex container’s cross-start side.
This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
flex-end
The items are packed flush to each other toward the edge of the alignment container depending on the flex container’s cross-end side.
This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
center
The items are packed flush to each other toward the center of the alignment container along the cross axis.
normal
The items are packed in their default position as if no align-content value was set.
baseline
first baseline

last baseline
the baseline is the line upon which most letters "sit" and below which descenders extend.
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
The fallback alignment for first baseline
is start, the one for last baseline is end.
space-between
The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
space-around
The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
space-evenly
The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
stretch
If the combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.
safe
Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start
.
unsafe
Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

Formal syntax

normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>

where
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

Example

CSS

#container {  height:200px;  width: 240px;  align-content: center;.    
n-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; }

HTML

<div id="container" class="flex">  <div id="item1">1</div>  <div id="item2">2</div>  <div id="item3">3</div>  <div id="item4">4</div>  <div id="item5">5</div>  <div id="item6">6</div> </div>  <div class="row">  <label for="display">display: </label>  <select id="display">  <option value="flex">flex</option>  <option value="grid">grid</option>  </select> </div>  <div class="row">  <label for="values">align-content: </label>  <select id="values">  <option value="normal">normal</option>  &l.    
end</option> <option value="left">left</option> <option value="right">right</option> <option value="baseline">baseline</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="safe center">safe center</option> <option value="unsafe center">unsafe center</option> <option value="safe right">safe right</option> <option value="unsafe right">unsafe right</option> <option value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div>

Result

Specifications


Specification Status Comment
CSS Box Alignment Module Level 3
The definition of ‘align-content’ in that specification.
Working Draft Adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values.
CSS Flexible Box Layout Module
The definition of ‘align-content’ in that specification.
Candidate Recommendation Initial definition

developer.mozilla.org

Синтаксис

/* Positional alignment */ align-content: center; /* Pack items around the center */ align-content: start; /* Pack items from the start */ align-content: end; /* Pack items from the end */ align-content: flex-start; /* Pack flex items from the start */ align-content: flex-end; /* Pack flex items from the end */ align-content: left; /* Pack items from the left */ align-content: right; /* Pack items from the right */  /* Baseline alignment */  align-content: baseline; align-content: first baseline; a.    
erflow alignment */ align-content: safe center; align-content: unsafe center; /* Global values */ align-content: inherit; align-content: initial; align-content: unset;

Значения

Значение Положение Описание
flex-start
flex-start
flex-start
Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей.
center
center
center
Строки располагаются по центру контейнера.
flex-end
flex-end
flex-end
Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей.
space-between
space-between
space-between
Строки равномерно распределяются в контейнере и расстояние между ними одинаково.
space-around
space-around
space-around
Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками.
stretch
stretch
stretch
Строки равномерно растягиваются, заполняя свободное пространство.

Примеры

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>align-content</title>  <style>  .flex-container {  width: 70px;  height: 240px;  border: 1px solid #333;  padding: 10px;  display: flex;  flex-wrap: wrap;  align-content: center;  }  .flex-container div {  width: 70px; height: 70px;  border-radius: 50%;  }  .red { background: red; }  .yellow { background: yellow; }  .green { background: green; }  </style>  </head>  <body>   <div class="flex-container">  <div class="red"></div>  <div class="yellow"></div>  <div class="green"></div>  </div>  </body> </html> 

Примечание

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

xsltdev.ru

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

11.0+ 28.0+ 21.0+ 12.1+ 9.0+

Описание

CSS свойство align-content указывает, каким образом будут выравниваться flex-элементы по вертикали внутри flex-контейнера, если разрешён перенос элементов и строк с элементами две или больше.

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

Значение по умолчанию: stretch
Применяется: к многострочным flex-контейнерам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.alignContent=»center»;

Синтаксис

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

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

Значение Описание
stretch Значение по умолчанию. Если у flex-элементов не задана высота, то они растягиваются на всю высоту контейнера так, чтобы каждая строка имела одинаковую высоту.
center flex-элементы располагаются точно по центру flex-контейнера, то есть снизу и сверху от элементов расстояние до границ контейнера будет одинаковым.

Примечание: если flex-элементы занимают больше вертикального пространства, чем высота контейнера, то элементы сместятся так, чтобы переполнение было одинаковым с обоих сторон контейнера.

flex-start flex-элементы выравниваются по левому верхнему углу контейнера.
flex-end flex-элементы выравниваются по левому нижнему углу контейнера.
space-between Строки с flex-элементами равномерно распределяются по вертикали так, чтобы между каждой парой соседних строк расстояние было одинаковым. Первая строка прилегает своей верхней границей к верхней границе контейнера, а последняя строка прилегает своей нижней границей к нижней границе контейнера.

Примечание: если flex-элементы занимают больше вертикального пространства, чем высота контейнера, то данное значение будет соответствовать значению flex-start.

space-around Строки с flex-элементы равномерно распределяются по вертикали так, чтобы между каждой парой соседних строк расстояние было одинаковым. Пустое пространство перед первой и после последней строки равно половине расстояния между каждой парой соседних строк.

Примечание: если flex-элементы занимают больше вертикального пространства, чем высота контейнера, то данное значение будет соответствовать значению center.

Пример

puzzleweb.ru

Синтаксис

/* Basic positional alignment */ /* align-content does not take left and right values */ align-content: center; /* Pack items around the center */ align-content: start; /* Pack items from the start */ align-content: end; /* Pack items from the end */ align-content: flex-start; /* Pack flex items from the start */ align-content: flex-end; /* Pack flex items from the end */  /* Normal alignment */ align-content: normal;  /* Baseline alignment */  align-content: baseline; align-content: first baseline; align-content: last baseline;  /* Distributed alignment */ align-content: space-between; /* Distribute items evenly  The first item is flush with the start,  the last is flush with the end */ align-content: space-around; /* Distribute items evenly  Items have a half-size space  on either end */ align-content: space-evenly; /* Distribute items evenly  Items have equal space around them */ align-content: stretch; /* Distribute items evenly  Stretch 'auto'-sized items to fit  the container */  /* Overflow alignment */ align-content: safe center; align-content: unsafe center;  /* Global values */ align-content: inherit; align-content: initial; align-content: unset; 

Значения

start
Элементы упаковываются друг за другом в направлении к краю начала контейнера выравнивания по поперечной оси.
end
Элементы упаковываются друг за другом в направлении к краю контейнера выравнивания по поперечной оси.
flex-start
Элементы упаковываются заподлицо друг к другу к краю контейнера выравнивания в зависимости от стороны поперечного начала гибкого контейнера.
Это относится только к элементам гибкого макета. Для элементов, которые не являются дочерними элементами гибкого контейнера, это значение обрабатывается как start .
flex-end
Элементы упаковываются заподлицо друг к другу к краю контейнера выравнивания в зависимости от стороны кросс-контейнера гибкого контейнера.
Это относится только к элементам гибкого макета. Для элементов, которые не являются дочерними элементами гибкого контейнера, это значение обрабатывается как end .
center
Элементы упаковываются друг за другом в центр контейнера для выравнивания вдоль поперечной оси.
normal
Элементы упакованы в позицию по умолчанию, как если бы не было установлено значение align-content .
baseline
first baseline

last baseline
базовая линия - это линия, по которой большинство букв «сидят» и ниже которых расширяются спутники.» style=»height: 110px; width: 410px;»/>
Определяет участие в выравнивании по первой или последней базовой линии: выравнивает базовую линию выравнивания первой или последней базовой линии коробки с соответствующей базовой линией в общем первом или последнем базовом наборе всех ящиков в своей группе совместного использования базовой линии.
Исходное выравнивание для first baseline start , для last baselineend .
space-between
Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Расстояние между каждой парой смежных элементов одинаково. Первый элемент заподлицо с краем основного запуска, а последний элемент заподлицо с краем основного конца.
space-around
Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Расстояние между каждой парой смежных элементов одинаково. Пустое пространство перед первым и после последнего элемента равно половине пространства между каждой парой смежных элементов.
space-evenly
Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Расстояние между каждой парой смежных элементов, краем основного начала и первым элементом, а также краем основного конца и последним элементом — все одинаково.
stretch
Если объединенный размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, любые объекты с auto определением имеют размер, увеличиваемый одинаково (не пропорционально), при этом сохраняя ограничения, налагаемые max-height / max-width (или эквивалентной функциональности), так что комбинированный размер точно заполняет контейнер выравнивания вдоль поперечной оси.
safe
Если размер элемента переполняет контейнер выравнивания, элемент выравнивается, как если бы режим выравнивания start .
unsafe
Независимо от относительных размеров предмета и контейнера выравнивания, данное значение выравнивания соблюдается.

Формальный синтаксис

flex-start | flex-end | center | space-between | space-around | space-evenly | stretch 

пример

CSS

#container {   height:200px;   width: 240px;   align-content: center; /* Can be changed in the live sample */   background-color: #8c8c8c; }  .flex {   display: flex;   flex-wrap: wrap; }  .grid {   display: grid;   grid-template-columns: repeat(auto-fill, 50px); }  div > div {   box-sizing: border-box;   border: 2px solid #8c8c8c;   width: 50px;   display: flex;   align-items: center;   justify-content: center; }  #item1 {   background-color: #8cffa0;   min-height: 30px; }  #item2 {   background-color: #a0c8ff;   min-height: 50px; }  #item3 {   background-color: #ffa08c;   min-height: 40px; }  #item4 {   background-color: #ffff8c;   min-height: 60px; }  #item5 {   background-color: #ff8cff;   min-height: 70px; }  #item6 {   background-color: #8cffff;   min-height: 50px;   font-size: 30px; }  select {   font-size: 16px; }  .row {   margin-top: 10px; } 

HTML

<div id="container" class="flex">   <div id="item1">1</div>   <div id="item2">2</div>   <div id="item3">3</div>   <div id="item4">4</div>   <div id="item5">5</div>   <div id="item6">6</div> </div>  <div class="row">   <label for="display">display: </label>   <select id="display">     <option value="flex">flex</option>     <option value="grid">grid</option>   </select> </div>  <div class="row">   <label for="values">align-content: </label>   <select id="values">     <option value="normal">normal</option>     <option value="stretch">stretch</option>     <option value="flex-start">flex-start</option>     <option value="flex-end">flex-end</option>     <option value="center" selected>center</option>     <option value="space-between">space-between</option>     <option value="space-around">space-around</option>     <option value="space-evenly">space-evenly</option>      <option value="start">start</option>     <option value="end">end</option>     <option value="left">left</option>     <option value="right">right</option>      <option value="baseline">baseline</option>     <option value="first baseline">first baseline</option>     <option value="last baseline">last baseline</option>      <option value="safe center">safe center</option>     <option value="unsafe center">unsafe center</option>     <option value="safe right">safe right</option>     <option value="unsafe right">unsafe right</option>     <option value="safe end">safe end</option>     <option value="unsafe end">unsafe end</option>     <option value="safe flex-end">safe flex-end</option>     <option value="unsafe flex-end">unsafe flex-end</option>   </select> </div> 

результат

code-examples.net


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector