このレッスンでは、以下のことを学びます。
- フレックスペアレント
- フレックスチャイルド
- フレックスペアレントの設定
- フレックスチャイルドの設定
1.フレックスペアレント
フレックスペアレントは、親要素のことです。他の要素を含む任意の要素から、フレックスコンテナを作成することができます。フレックスペアレントを作成するには
- 要素を選択します。
- スタイルパネル > レイアウトで、表示設定をフレックスに設定します。
他の表示設定とは異なり、親要素のフレックスを有効にすると、内部の直接の子要素のレイアウトに影響を及ぼします。親要素のフレックス表示設定を有効にすると、子要素はデフォルトで左寄せになり、水平に積み重ねられます。
Flexコンテナは、その直接の子要素内の子要素のレイアウトに影響を与えたり、変更したりすることはありません。
2.フレックスチャイルド
親要素をフレックスコンテナにすると、その要素の直接の子要素はフレックスチャイルドになります。フレックスチャイルドのレイアウト設定を上書きするには、その要素を選択し、レイアウト設定を調整します。
3.フレックスペアレントの設定
親要素のレイアウト設定をフレックスに変更すると、フレックスの親要素とそれを含む子要素の両方に、さまざまなレイアウトオプションが用意されます。
レイアウトの向きを設定する
フレックスペアレントの方向は、デフォルトでは水平方向です。スタイルパネル > レイアウトのフレックスレイアウト設定で、向きを縦に切り替えることができます。
レイアウトの向きを反転させる
スタイルパネル＞レイアウトの方向設定で、フレックス親レイアウトの配置を反転させることができます。
フレックスペアレントのレイアウトを反転させることは、右から左へのサイトや、より小さなブレークポイントでレイアウトを反転させる必要がある場合に特に有効です。
4.フレックスチャイルドの設定
フレックス親内のフレックス子の配置を変更するには、フレックス親を選択し、レイアウト方向の設定で希望する配置を選択します。
水平方向の位置合わせオプション
子要素を水平に揃えるには、次のいずれかの配置オプションを選択します。
- 開始：項目は左揃えになります
- 中央：項目を中央揃えにする
- 終了：項目が右揃えになる
- 間のスペース：項目は端から端まで均等に配置されます。
- 周りのスペース: 要素と要素の間に沿って均等に配置されます。
縦位置表示オプション
フレックスチャイルドを縦に揃えるには、以下の整列オプションのいずれかを選択します。
- 開始：項目は上部に整列されます
- 中央：項目は縦方向の中央に配置されます
- 終了：項目は下に整列されます伸張：項目はフレックスコンテナの高さに伸張されます。
- ベースライン：アイテムはベースライン（テキストが置かれている見えない線）に沿って整列されます。
列と行の間のギャップを調整する
ギャップは、マージンやパディングを追加せずに、フレックス子要素間のスペースを指定することができます。列と行の間のギャップサイズを調整するには、「スタイル」パネルに必要なギャップサイズを入力します。