設定を調整する

構成設定は、親コンテナー内の子コンポーネントの配置動作を管理します。さまざまな調整設定を利用することで、1 次元または 2 次元でのレイアウトを調整し、コンポーネントが互いに関連してどのように表示されるか管理できます。

このチュートリアルでは、 スタイルパネル > レイアウト セグメント：

1. 初級
2. 弾性
3. グリッド
4. インライン要素
5. フレックスインライン
6. グリッドインライン
7. インライン構成
8. 消える

初級

初級 ほとんどのコンポーネントの事前設定された調整設定です。基本親要素内のすべての子コンポーネントは新しい行から始まり、カスタム幅が指定されていない限り、親要素の幅全体を占めます。

弾性

フレキシブルボックス 直下の子コンポーネントを 1 次元 (水平または垂直) に整理します。直下の子が積み重なる方向、親要素内での配置と位置合わせの方法、子の間に隙間があるかどうか、次の行に移行するかどうかをカスタマイズできます。

弾性親要素を確立すると、その親要素の直下の子はすべて弾性子になります。弾性子設定で、弾性子の調整設定 (サイズ、配置、順序など) を置き換えることができます。

グリッド

グリッドデザイン 直下の子要素を 2 次元 (水平方向と垂直方向の両方) で列と行に整理します。直下の子要素をグリッド内でどのように配置、整列、配分するかをカスタマイズし、列と行の間にスペースを挿入することができます。グリッドの子要素設定で、グリッドの子要素の調整設定 (位置、スパン、整列、位置揃え、順序など) を変更できます。

グリッドの比率を決定する際に、スペースに適応しながら行と列のスペースを自動的に計算する FR ユニットを使用して、流動的なグリッドを確立できます。

インライン要素

子コンポーネント インライン要素 親要素は隣り合って配置され、その幅は内部のコンテンツに基づいて決定されます。コンテンツが親要素の境界に達すると、子要素は折り返されます。

リマインダー： インライン要素を使用すると、HTML 内の空白がサイト デザインの表示スペースに変換されます。インライン要素コンポーネント間のスペースを処理する方法について説明します。

フレックスインライン

フレックスインライン 要素をインライン レベルのフレキシブル コンテナーとして表示します。フレックス インライン 親の子コンポーネントは、フレックスボックス モデルに従って配置されます。基本的に、フレックス コンテナーはインライン要素に変換され、その子はフレックス アイテムとしてレイアウトされます。

グリッドインライン

グリッドインライン 要素をインライン レベルのグリッド コンテナーとして表示します。グリッド インライン 親の子コンポーネントは、グリッド モデルに従って配置されます。フレックス インラインと比較すると、グリッド インラインは、親要素のインライン レベルの動作と、子のグリッド レイアウトの柔軟性を統合します。

インライン構成

インライン構成 要素内のテキスト コンテンツに事前設定された調整設定です。インライン要素の幅や高さを変更することはできませんが、余白とパディングを調整することでインライン要素のレイアウトを修正できます。

消え去る

あなたは 消え去る 要素を完全に非表示にする調整設定。非表示に設定された要素はブラウザに表示されないため、モバイル デバイスでのコンテンツの表示方法を変更する場合に便利です。非表示に設定された要素はアクセシビリティ構造からも除外されるため、要素とその子要素はスクリーン リーダーなどの支援技術ではアクセスできなくなります。