前回のベースライン調整

すべての主要なブラウザ エンジンで、CSS グリッドと Flexbox の最後のベースライン配置がサポートされるようになりました。

Rachel Andrew

first キーワードと last キーワードを使用した配置が、すべての主要なエンジンで利用できるようになりました。つまり、フレキシブル アイテムのグループまたはグリッド アイテムのグループを調整するときに、最後のベースライン アライメントを別のオプションとして使用できます。

最初のベースライン アライメント

align-items の値を baseline に設定すると、最初のベースライン アライメントが結果になります。そのため、配置するアイテムの最初のベースライン（「配置のサブジェクト」と呼びます）は、グループ内の他のアイテムの最初のベースラインに揃えられます。以下の例では、最初の 2 つの Flex アイテムが align-items: baseline を使用して配置され、長いテキストによって作成されたベースラインに沿って配置されています。最後のアイテムは flex-start に揃えられるため、Flex コンテナの開始位置に揃えられます。

前回のベースライン調整

グリッドまたは Flex のアイテムを値 last baseline に揃えると、そのアイテムの最後のベースラインが、そのアイテムが属するベースライン共有グループの最後のベースラインに揃えられます。次の例は、最後のベースラインの配置を示しています。最初のフレキシブル アイテムが、大きい方のアイテムの最後のテキスト行に揃えられます。このグループの最後のアイテムは、Flex コンテナの終点である flex-end に揃えられます。

フォールバックの調整

アライメント対象に基準となるベースライン共有グループがない場合は、フォールバック アライメントが使用されます。baseline と first baseline の場合、フォールバック アライメントは start であり、last baseline の場合、フォールバック アライメントは end です。