Movatterモバイル変換


[0]ホーム

URL:


  1. 開発者向けのウェブ技術
  2. CSS
  3. ガイド
  4. ボックス配置
  5. 段組みレイアウトで

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。

View in EnglishAlways switch to English

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

CSS ボックス配置モジュールでは、さまざまなレイアウト方式で配置がどのように働くかを詳述しています。このガイドでは、段組みレイアウトのコンテキストにおいてボックス配置がどのように働くかを探ります。このガイドの目的は、段組みレイアウトとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方式の間で共通の機能について詳述した、主となるボックス配置の概要ガイドを合わせてお読みください。

段組みレイアウトにおいて、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置対象物は段ボックスです。段組みレイアウトに適用されるプロパティの詳細を以下に示します。

align-content と justify-content

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

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

column-gap

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

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp