Align items


The CSS align-items property sets the align-self value on all direct children as a group. The align-self property sets the alignment of an item within its containing block.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Currently this property is supported in Flexbox and CSS Grid Layout. In Flexbox it controls the alignment of items on the Cross Axis, in Grid Layout it controls the alignment of items on the Block Axis.

Syntax

/* Basic keywords */  align-items: normal;  align-items: stretch;   /* Positional alignment */  /* align-items does not take left and right values */ align-items: center; /* Pack items around the center */  align-items: start; /* Pack items from the sta.  

items: initial; align-items: unset;

Values

normal
The effect of this keyword is dependent of the layout mode we are in:

  • In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
  • In static position of absolutely-positioned layouts, the keyword behaves as stretch.
  • For flex items, the keyword behaves as stretch.
  • For grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
  • The property doesn’t apply to block-level boxes, and to table cells.
flex-start
The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.
flex-end

The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.
center
The flex items’ margin boxes are centered within the line on the cross-axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.
start
The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.
end
The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.
self-start
The items are packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
self-end
The items are packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
baseline
first baseline
last baseline
All flex items are aligned such that their flex container baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
stretch
Flex items are stretched such that the cross-size of the item’s margin box is the same as the line while respecting width and height constraints.
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 | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]

where
<baseline-position> = [ first | last ]


gle_bar" title="Single bar: exactly one of the entities must be present">|
end | self-start | self-end | flex-start | flex-end

Example

CSS

#container {  height:200px;  width: 240px;  align-items: 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.  

ight: 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-items: </label>  <select id="values">  <option value="normal">normal</option>  <option value="flex-start">flex-start</option>  <option value="flex-end">flex-end</option>  <option value="center" selected>center</option>  <optio.  

ast 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 self-end">safe self-end</option> <option value="unsafe self-end">unsafe self-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-items’ in that specification.
Working Draft Update to latest syntax definitions.
CSS Flexible Box Layout Module
The definition of ‘align-items’ in that specification.
Candidate Recommendation Initial definition
Initial value normal
Applies to all elements
Inherited no
Media visual
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Browser compatibility

Support in Flex layout

Support in Grid layout

developer.mozilla.org

Синтаксис


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

Значения

normal
Эффект этого ключевого слова зависит от режима макета, в котором мы находимся:

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

flex-start
Край крайнего края кросс-начала элемента flex сбрасывается краем кросс-начала линии.
flex-end
Край кросс-края края гибкого элемента продувается краем кросс-края линии.
center
Поле поля гибкого элемента находится в центре линии на поперечной оси. Если кросс-размер элемента больше, чем контейнер гибкого контейнера, он будет переполняться одинаково в обоих направлениях.
start
Элемент упаковывается заподлицо друг к другу к началу края контейнера выравнивания на соответствующей оси.
end
Элемент упаковывается заподлицо друг к другу к концевой кромке контейнера выравнивания на соответствующей оси.
center
Элементы упаковываются друг за другом в центр контейнера выравнивания.
self-start
Элементы упаковываются заподлицо к краю контейнера выравнивания начальной стороны элемента на соответствующей оси.
self-end
Элемент упаковывается заподлицо к краю контейнера выравнивания на торцевой стороне изделия на соответствующей оси.
baseline

first baseline
last baseline
Все элементы гибки выровнены так, что их исходные линии выравниваются. Элемент с наибольшим расстоянием между краем края кросс-начала и базовой базой очищается краем кросс-начала линии.
stretch
Элементы Flex растягиваются, например, кросс-размер поля поля элемента совпадает с строкой при соблюдении ограничений ширины и высоты.
safe
Если размер элемента переполняет контейнер выравнивания, элемент выравнивается, как если бы режим выравнивания start .
unsafe
Независимо от относительных размеров предмета и контейнера выравнивания, данное значение выравнивания соблюдается.

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

normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> [

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

пример

CSS

#container {   height:200px;   width: 240px;   align-items: 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-items: </label>   <select id="values">     <option value="normal">normal</option>     <option value="flex-start">flex-start</option>     <option value="flex-end">flex-end</option>     <option value="center" selected>center</option>     <option value="baseline">baseline</option>     <option value="stretch">stretch</option>      <option value="start">start</option>     <option value="end">end</option>     <option value="self-start">self-start</option>     <option value="self-end">self-end</option>     <option value="left">left</option>     <option value="right">right</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 self-end">safe self-end</option>     <option value="unsafe self-end">unsafe self-end</option>     <option value="safe flex-end">safe flex-end</option>     <option value="unsafe flex-end">unsafe flex-end</option>   </select> </div> 

результат

code.i-harness.com

Начинаем погружение

Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков). Первое, что нужно сделать – это указать контейнеру display:flex или display:inline-flex.

HTML

<div class="my-flex-container">  <div class="my-flex-block">item1</div>  <div class="my-flex-block">item2</div>  <div class="my-flex-block">item3</div> </div> 

CSS

.my-flex-container{  display: flex; } 

Основные свойства flex-контейнера. Главная и поперечная ось.

Одним из основных понятий в fleхbox являются оси.

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

Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction.

flex-direction – направление главной оси

flexbox-main-columnflexbox-main-row

Доступные значения flex-direction:

  • row (значение по умолчанию) : слева направо (в rtl справа налево)
  • row-reverse: справа налево (в rtl слева направо)
  • column: сверху вниз
  • column-reverse: снизу вверх

justify-content – выравнивание по главной оси.

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

Доступные значения justify-content:

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

flex-justify-content

align-items – выравнивание по поперечной оси.

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

Доступные значения align-items:

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

flex-align-items

СSS свойства flex-direction, justify-content, align-items должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо основных свойств flex-контейнера

Оси и выравнивания по ним – это основы flex. Расслабьтесь, покликайте по демке и используйте ее, если нужно будет освежить в памяти.

flexbox demo

Многострочная организация блоков внутри flex-контейнера.

flex-wrap

Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap.

Доступные значения flex-wrap:

  • nowrap (значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)
  • wrap: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)
  • wrap-reverse: то-же что и wrap, но блоки располагаются в обратном порядке.

flex-flow – удобное сокращение для flex-direction + flex-wrap

По сути,flex-flow предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси. По умолчанию flex-flow: row nowrap.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

CSS

/* т.е. ... */  .my-flex-block{  flex-direcrion:column;  flex-wrap: wrap; }  /* это то же самое, что ... */  .my-flex-block{  flex-flow: column wrap; } 

align-content

Существует также свойство align-content, которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.

Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse;)

Доступные значения align-content:

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

flex-align-content

СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо свойств многострочности в flex

flexbox demo

CSS правила для дочерних элементов flex-контейнера (flex-блоков)

flex-basis – базовый размер отдельно взятого flex-блока

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны (px, em, %, …) или auto(по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.

flex-grow – “жадность” отдельно взятого flex-блока

Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. flex-grow принимает безразмерное значение ( по умолчанию 0)

Пример 1:

  • Если все flex-блоки внутри flex-контейнера имеют flex-grow:1, то они будут одинакового размера
  • Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные

Пример 2:

  • Если все flex-блоки внутри flex-контейнера имеют flex-grow:3, то они будут одинакового размера
  • Если один из них имеет flex-grow:12, то он будет в 4 раза больше, чем все остальные

Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока

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

flex – короткая запись для свойств flex-grow, flex-shrink и flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

CSS

/* т.е. ... */  .my-flex-block{  flex-grow:12;  flex-shrink:3;  flex basis: 30em; }  /* это то же самое, что ... */  .my-flex-block{  flex: 12 3 30em; } 

Демо для flex-grow, flex-shrink и flex-basis

flexbox demo

align-self – выравнивание отдельно взятого flex-блока по поперечной оси.

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока.

Доступные значения align-self (те же 5 вариантов, что и для align-items)

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

order – порядок следования отдельно взятого flex-блока внутри flex-контейнера.

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

Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

HTML

<div class="my-flex-container">  <div class="my-flex-block" style="order: 5" >item1</div>  <div class="my-flex-block" style="order: 10">item2</div>  <div class="my-flex-block" style="order: 5" >item3</div>  <div class="my-flex-block" style="order: 5" >item4</div>  <div class="my-flex-block" style="order: 0" >item5</div> </div> 

В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: item5, item1, item3, item4, item2

Демо для align-self и order

flexbox demo

margin: auto по вертикали. Мечты сбываются!

Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!

.my-flex-container {  display: flex;  height: 300px; /* Или что угодно */ }  .my-flex-block {  width: 100px; /* Или что угодно */  height: 100px; /* Или что угодно */  margin: auto; /* Магия! Блок отцентрирован по вертикали и горизонтали! */ } 

Вещи, которые следует помнить

  1. Не следует использовать flexbox там, где в этом нет необходимости.
  2. Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
  3. Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
  4. Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
  5. Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
  6. flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент, но эта статья довольно убедительно показывает недостатки xanthir.com/blog/b4580

В заключение

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

html5.by

Flexbox так и напрашивается на то, чтобы создавать по нему визуальные шпаргалки. Сегодня мы предлагаем вам перевод статьи Скотта Домеса «Как работает Flexbox – в больших, ярких анимированных гифках», своего рода наглядное пособие.

Align items

Flexbox обещает избавить нас от недостатков стандартного CSS (таких как вертикальное выравнивание).
Следует признать, что Flexbox действительно справляется с поставленной задачей. Однако освоение этой новой модели может вызвать некоторые затруднения.
Попробуем продемонстрировать, как функционирует Flexbox, позволяя создавать более совершенные макеты страниц.

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

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

Свойство № 1: Display: Flex

Вот наша интернет-страница в качестве примера:
Align items

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

Чтобы начать работу с Flexbox, вам надо превратить свой контейнер в flex-контейнер. Это делается следующим образом:

#container {  display: flex; }

Align items
На первый взгляд изменения незначительны —  ваши блоки отображаются теперь в инлайновом виде, только и всего. Между делом вы сделали большой шаг. Вы создали для своих блоков так называемый flex-контекст.

Теперь вы можете размещать их в этом контексте — это намного проще, чем при работе с традиционным CSS.

Свойство № 2: Flex Direction

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

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

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

Align items

Следует подчеркнуть: flex-direction: column не располагает квадраты на перпендикулярной оси вместо главной оси. Это свойство меняет направление самой главной оси из горизонтального в вертикальное.

У flex-direction есть и другие значения: row-reverse и column-reverse.
Align items

Свойство № 3: Justify Content

Justify Content задаёт выравнивание элементов по главной оси.

Здесь различие главной и перпендикулярной осей следует рассмотреть подробнее. Сначала вернемся к flex-direction: row.

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

У Justify Content есть пять значений:

  • Flex-start
  • Flex-end
  • Center
  • Space-between
  • Space-around

Align items

Space-around и space-between наименее интуитивны. Space-between выравнивает элементы так, чтобы они располагались на одинаковом расстоянии относительно друг друга, но не относительно контейнера.

Space-around задает одинаковый отступ вокруг элемента со всех сторон. Это означает, что пространство между крайними квадратами и контейнером вдвое меньше, чем пространство между двумя квадратами (все отступы имеют одинаковую величину и не накладываются друг на друга, соответственно, промежуток между квадратами получается двойной).

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

Свойство № 4: Align Items

Если вы освоили justify-content, align-items не вызовет у вас затруднений.

В то время как justify-content применяется для главной оси, align-items задаёт выравнивание элементов по перпендикулярной оси.

Align items

Зададим для flex-direction изначальное значение row, чтобы оси выглядели следующим образом.

Затем перейдем к командам align-items.

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

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

Следующие две несколько отличаются.

При заданном значении stretch элементы занимают всё свободное пространство по перпендикулярной оси. Если задано baseline, основания тегов абзаца выравниваются.

Align items

(Для align-items важно следующее: при значении stretch надо задать высоту квадратов автоматически, иначе она будет переопределять ширину.)

Что касается baseline, имейте в виду: если вы убираете теги абзаца, то будут выравниваться основания квадратов, как в примере:

Align items

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

Align items

При row квадраты выравниваются вдоль горизонтальной главной оси. При column они располагаются вдоль вертикальной главной оси.

Даже если квадраты центрированы и вертикально и горизонтально в обоих случаях, эти две команды не взаимозаменяемы!

Свойство № 5: Align Self

Align Self позволяет вручную управлять выравниванием одного конкретного элемента.

Это свойство аннулирует значения align-items для выбранного квадрата. Все свойства — те же, но по умолчанию выставляется auto, при котором значения аналогичны align-items контейнера.

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

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

Align items

Заключение

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

Спасибо за внимание!

habr.com

Синтаксис

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

Значения

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

Примеры

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

Примечание

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

xsltdev.ru

Значения

Значение Описание
flex-start Блоки прижаты к началу поперечной оси.
flex-end Блоки прижаты к концу поперечной оси.
center Блоки стоят по центру поперечной оси.
baseline Элементы выравниваются по своей базовой линии. Базовая линия (англ. baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учета свисаний, например, как у букв ‘ц’, ‘д’, ‘р’, ‘щ’.
stretch Блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width и max-width, если они заданы. Если же задана ширина и высота для элементов — stretch будет проигнорирован.

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

Примеры

Пример . Значение stretch

Сейчас главная ось направлена слева направо (это делает flex-direction: row), а по побочной оси элементы растянуты на всю высоту:

Результат выполнения кода:

Пример . Значение stretch + размеры элемента

Сейчас для элементов задана ширина и высота, поэтому значение stretch для свойства align-items будет проигнорировано:

Результат выполнения кода:

Пример . Значение flex-start без размеров элемента

Сейчас элементы будут прижаты к верху:

Результат выполнения кода:

Пример . Значение flex-start + размеры элемента

Сейчас элементы по прежнему будут прижаты к верху, однако у них будет заданная ширина и высота:

Результат выполнения кода:

Пример . Значение flex-end + размеры элемента

Сейчас элементы будут прижаты к низу:

Результат выполнения кода:

Пример . Значение center + размеры элемента

Сейчас элементы будут стоять по центру по поперечной оси (в данном случае по вертикали):

Результат выполнения кода:

Пример . Значение center, элементы разного размера

Сейчас элементы имеют разный размер по высоте (сейчас они раздвигаются текстом, но можно задать и height), ширина у всех одинаковая, так как задано свойство width.

Результат выполнения кода:

Пример . Значение baseline, элементы разного размера

А вот так выглядит выравнивание по базовой линии align-items: baseline (сама линия выделена красным цветом):

Результат выполнения кода:

code.mu


You May Also Like

About the Author: admind

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

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

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