baseline-source

Syntax

/* キーワード値 */
baseline-source: auto;
baseline-source: first;
baseline-source: last;

/* グローバル値 */
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   

例

インラインフレックスコンテナー内でベースラインの選択

この例は、baseline-source プロパティを使用してインラインフレックスコンテナーのベースライン配置を制御する方法を示しています。

HTML

HTML には複数の <span> 要素が含まれており、これらは記述コンテンツ用の汎用インラインコンテナーです。 3 つの <span> 要素には、入れ子になった <span> の子要素が含まれています。

<span>ベースライン ___</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;
}

すべてのボックスをインラインフレックスコンテナーとして定義します。 .first ボックスには最初のベースラインを、.auto ボックスにはデフォルトのベースライン（インラインフレックスコンテナーでは first）を、.last ボックスには最後のベースラインを設定します。

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

.first {
  baseline-source: first;
}

.auto {
  baseline-source: auto;
}

.last {
  baseline-source: last;
}

結果

仕様書

ブラウザーの互換性

関連情報

• vertical-align プロパティ
• CSS ボックス配置の概要