段組みレイアウトでのボックス配置

ボックス配置仕様書では、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、段組みレイアウトのコンテキストでボックス配置がどのように動作するかを探ります。このページとしての目的は、段組みレイアウトとボックス配置に特有のことを探ることですので、レイアウト方法をまたがるボックス配置の共通の機能の詳細を詳説している、中心となるボックス配置ページと併せて読んでください。

段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置主題は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。

メモ: 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。

align-content と justify-content

align-content プロパティはブロック軸に、 justify-content はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は column-gap プロパティで指定された寸法よりも大きくなることがあります。

justify-contentnormal または stretch 以外の値を使用すると、 column-width が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。

column-gap

段組みレイアウト仕様書の早期の版では、 column-gap プロパティが定義されていましたが、ボックス配置では他のレイアウト方法の gap プロパティと統合されました。他のレイアウト方法では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。

リファレンス

CSS プロパティ

用語集

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,