Свойство CSS `baseline-source`

Свойство baseline-source CSS определяет, какую линию базового выравнивания использовать, если у строчных блоков возможно несколько таких линий, например у многострочных строчных блоков или строчных flex-контейнеров. Значения позволяют выбрать выравнивание по первой или последней линии базового выравнивания блока либо предоставить браузеру возможность автоматически сделать выбор в зависимости от типа блока.

Синтаксис

/* Keyword values */
baseline-source: auto;
baseline-source: first;
baseline-source: last;

/* Global values */
baseline-source: inherit;
baseline-source: initial;
baseline-source: revert;
baseline-source: revert-layer;
baseline-source: unset;

Значения

auto

Задает выравнивание по last baseline для строчных блоков и по first baseline для всех остальных элементов.

first

Задает выравнивание first baseline.

last

Задает выравнивание last baseline.

Формальное определение

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

baseline-source = 
  auto |
  first |
  last

Примеры

Выбор линии базового выравнивания в строчных flex-контейнерах

В этом примере показано, как использовать свойство baseline-source для управления выравниванием по базовой линии строчных flex-контейнеров.

HTML

В нашем HTML есть несколько элементов <span>, представляющих собой универсальные строчные контейнеры для фразового содержимого. Три элемента <span> содержат вложенные дочерние элементы <span>.

<span>Baseline ___</span>

<span class="box first">
  <span>First</span>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</span>

<span class="box auto">
  <span>Auto</span>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</span>

<span class="box last">
  <span>A</span>
  <span>B</span>
  <span>C</span>
  <span>Last</span>
</span>

CSS

body {
  font-family: sans-serif;
}

.box {
  border: 2px solid #888888;
  width: 50px;
}

span {
  padding: 0.4rem;
}

Мы задаем всем блокам тип строчного flex-контейнера. Для блока .first задаем использование первой линии базового выравнивания, блок .auto использует линию базового выравнивания по умолчанию (то есть first для строчных flex-контейнеров), а блок .last использует последнюю линию базового выравнивания.

.box {
  display: inline-flex;
  flex-direction: column;
}

.first {
  baseline-source: first;
}

.auto {
  baseline-source: auto;
}

.last {
  baseline-source: last;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• vertical-align свойство
• Обзор выравнивания элементов CSS