このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
段組みレイアウトでのボックス配置
ボックス配置仕様書では、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このページでは、段組みレイアウトのコンテキストにおいてボックス配置がどのように働くかを探ります。このページとしての目的は、段組みレイアウトとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となるボックス配置ページを合わせてお読みください。
段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置対象物は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。
メモ:段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。
align-content と justify-content
align-content プロパティはブロック軸に、justify-content はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間はcolumn-gap プロパティで指定された寸法よりも大きくなることがあります。
justify-content にnormal またはstretch 以外の値を使用すると、column-width が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。
column-gap
段組みレイアウト仕様書の早期の版では、column-gap プロパティが定義されていましたが、ボックス配置では他のレイアウト方式の gap プロパティと統合されました。他のレイアウト方式では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。