place-self

Это сокращенное свойство для следующих свойств CSS:

• align-self
• justify-self

auto

Вычисляется как значение align-items родительского элемента.

normal

Эффект этого ключевого слова зависит от режима макета:

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

self-start

Выравнивает элементы по краю контейнера выравнивания, соответствующему началу элемента по оси пересечения.

self-end

Выравнивает элементы по краю контейнера выравнивания, соответствующему концу элемента по оси пересечения.

flex-start

Край отступа по оси пересечения элемента flex выровнен с началом линии по оси пересечения.

flex-end

Край отступа по оси пересечения элемента flex выровнен с концом линии по оси пересечения.

center

Блокировка элемента flex центрируется в линии по оси пересечения. Если размер элемента по оси пересечения больше контейнера flex, он будет переполняться поровну в обоих направлениях.

baseline, first baseline. last baseline

Указывает на участие в выравнивании по первой или последней базовой линии: выравнивает базовые линии первого или последнего набора базовых линий блока с соответствующими базовыми линиями в общем первом или последнем наборе базовых линий всех блоков в группе, использующей общие базовые линии. По умолчанию для first baseline является start, а для last baseline является end.

stretch

Если общий размер элементов по оси пересечения меньше размера контейнера выравнивания, и элемент имеет размер auto, его размер увеличивается равномерно (а не пропорционально), при этом соблюдаются ограничения, налагаемые max-height/max-width (или аналогичные функции), так что общий размер всех элементов с размером auto точно заполняет контейнер выравнивания по оси пересечения.

anchor-center

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

place-self = 
  <'align-self'> <'justify-self'>?  

<align-self> = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         

<justify-self> = 
  auto                                                |
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  anchor-center                                       

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end    

В следующем примере показана простая сетка 2x2. Изначально контейнер сетки имеет значения justify-items и align-items stretch, что по умолчанию приводит к растягиванию элементов сетки на всю ширину ячеек.

Затем для вторых, третьего и четвертого элементов сетки задаются различные значения place-self, чтобы продемонстрировать, как они переопределяют значения по умолчанию. Эти значения заставляют элементы сетки занимать только ширину/высоту своего содержимого и выравнивать их в различных позициях в ячейках по блочной и строчной осям.

HTML

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
</article>

CSS

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
}

span:nth-child(2) {
  place-self: start center;
}

span:nth-child(3) {
  place-self: center start;
}

span:nth-child(4) {
  place-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

Результат

• align-self
• justify-self
• Основные понятия Flexbox
• Выравнивание элементов в контейнере Flex
• Выравнивание блоков в CSS сетках
• CSS выравнивание блоков модуль