この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元表示設定は、親要素内の子要素のレイアウト動作を制御します。異なる表示設定を使用することで、1次元または2次元のレイアウトを制御し、要素がお互いにどのように表示されるかを制御できます。
この記事では、スタイルパネル内の各表示設定について説明します：
ブロック
ブロック は、ほとんどの要素のデフォルトの表示設定です。ブロック親要素内の各子要素は新しい行で始まり、カスタム幅が設定されていない限り、親要素の幅をいっぱいに使用します。
フレックスボックス
フレックスボックス は、直接の子要素を1次元に配置します（水平または垂直）。直接の子要素がスタックされる方向、親要素内でどのように配置および整列されるか、間隔があるかどうか、次の行に折り返すかどうかをカスタマイズできます。
フレックス親要素を作成すると、その親要素のすべての直接の子要素がフレックス子要素になります。フレックス子要素のレイアウト設定（サイズ、整列、順序など）は、フレックス子要素の設定でオーバーライドできます。
グリッド
グリッド は、直接の子要素を2次元に配置します（水平および垂直） - 列と行に配置します。直接の子要素の配置、整列、グリッド内での分布をカスタマイズでき、列と行の間に間隔を追加できます。また、グリッド子要素のレイアウト設定（位置、スパン、整列、整列位置、順序など）をグリッド子要素の設定でオーバーライドできます。
グリッドのサイジングを決定する際には、フルードグリッドを作成するために、行と列のスペースを自動的に計算する FR ユニットを使用できます。
インラインブロック
インラインブロック 親要素内の子要素は、横に並べられ、その幅は内部のコンテンツによって決まります。子要素は、コンテンツが親要素の境界に達すると折り返されます。
注意: インラインブロックを使用する場合、HTML内の空白はサイトデザイン内で視覚的なスペースとなります。
Inline
インライン は、要素内のテキストコンテンツのデフォルトの表示設定です。インライン要素のレイアウトを変更するには、マージンやパディングを変更することができますが、幅や高さは変更できません。
None
none 表示設定を使用して、要素を完全に非表示にすることができます。none に設定された要素は、ブラウザによってレンダリングされず、モバイルデバイス上でコンテンツがどのように表示されるかを変更する際に便利です。none に設定された要素は、アクセシビリティツリーからも削除され、スクリーンリーダーなどの支援技術で要素およびその子要素が利用できなくなります。