レッスン内容
フレックスの親と子
要素にフレックスボックスを設定すると、通常は親要素に設定し、子要素の配置を制御できるようにします。フレックスボックスを使用する親要素は、「フレックス親」とも呼ばれます。フレックス親の直接の子要素は、「フレックス子」とも呼ばれます。
他の要素を含む要素からフレックス親を作成できます。フレックス親を作成するには：
- キャンバス上の要素（例：セクション、ディブブロック）を選択します
- スタイルパネル > レイアウト に移動します
- 表示 で フレックス を選択します
他の表示設定とは異なり、親要素にフレックスを有効にすると、直接の子要素のレイアウトに影響を与えます。親要素にフレックスボックスを有効にすると、子要素が左揃えで水平にスタックされるデフォルトの表示になります。この表示をフレックス親の設定で調整できます。
注意： フレックスボックスに設定された要素は、その直接の子要素内の子要素のレイアウトには影響しません。
フレックス親の設定
親要素にフレックスボックスを設定した後、フレックス親とその子要素に対して多数のレイアウトオプションが利用できます。
- ディレクション（方向）
- アライン（垂直配置）
- ジャスティファイ（水平配置）
- ギャップ（間隔）
- ラップ（折り返し）
ディレクションの設定または反転
デフォルトでは、フレックス親は水平方向に設定されています。方向を切り替えるには、フレックス親を選択し、スタイルパネル > レイアウト > ディレクション に移動し、水平 または 垂直 を選択します。
フレックス親の方向を反転するには、スタイルパネル > レイアウト > ディレクション に移動し、反転 アイコンをクリックします。これにより、要素の順序が反転し、最初の要素が最後になり、2番目の要素が2番目から最後になります。フレックス親の方向を反転することは、右から左へのサイトや、より小さいブレークポイントでのデザインに便利です。
注意： フレックス親の方向を反転すると、ドキュメント内のフレックス子の位置は変わりません。これは、要素の視覚的な順序とDOMの順序が一致しないことを意味し、サイトの訪問者にとって混乱する可能性があります。
フレックス子の垂直配置を設定する
フレックス子の垂直配置を変更するには、フレックス親を選択し、スタイルパネル > レイアウト > アライン に移動します。次に、次の配置オプションのいずれかを選択します：
- スタート — フレックス子が上端に配置されます
- センター — フレックス子が垂直方向に中央に配置されます
- エンド — フレックス子が下端に配置されます
- ストレッチ — フレックス子がフレックス親の高さ全体に広がります
- ベースライン — フレックス子がベースラインに配置されます（テキストが配置される目に見えない
フレックス子要素の水平方向の配置を設定する
フレックス子要素の水平方向の配置を変更するには、フレックス親要素を選択し、次にStyle panel > Layout > Justify に移動します。そして、次の配置オプションのいずれかを選択します：
- Start — フレックス子要素は左揃えされます
- Center — フレックス子要素は中央揃えされます
- End — フレックス子要素は右揃えされます
- Space between — フレックス子要素は端から端まで均等に分布します
- Space around — フレックス子要素は要素と端の間で均等に分布します
子要素間に隙間を追加する
隙間を使用すると、フレックス子要素間のスペースを追加する際に、マージンやパディングを追加する必要がありません。列と行の間の隙間サイズを調整するには、フレックス親要素を選択し、次に Style panel > Layout > Gap に移動します。
デフォルトでは、列と行の間の隙間はロックされています。これは、列の隙間サイズを変更する場合、行の隙間サイズも自動的に同じ数値に調整されることを意味します。列と行の間の隙間を独立して調整するには、隙間の間にある「lock」アイコンをクリックします。
プロのヒント： gapサイズを素早く増減させるには、オプション（Macの場合）またはAlt（Windowsの場合）キーを押しながら、マウスを列または行の隙間フィールド上で左または右にドラッグします。
注意： 「locked」または「unlocked」gaの選択は、ブラウザのデザイナー全体で持続します。隙間をロックまたはロック解除することを選択すると、この選択肢はグリッドの隙間のロックまたはロック解除の状態にも影響します。
子要素を折り返す
デフォルトでは、フレックス子要素は1行に収めようとします。これを変更するには、子要素を折り返すことができます。Style panel > Layout > Wrap に移動し、折り返し(wrap) を選択します。
子要素を折り返すと、以下のオプションを使用して複数の行のコンテンツを水平方向に整列させることができます：
- Start — 行はフレックス親要素の上端に揃えられます
- Center — 行はフレックス親要素の垂直中央に垂直方向に整列します
- End — 行はフレックス親要素の下端に揃えられます
- Stretch — 行は空白の垂直スペースを埋めるように伸縮します
- Space between — 行は上端から下端まで均等に分布します
- Space around — 行は他の行および端との間で均等に分布します
また、子要素の折り返しを逆にする には、Style panel > Layout > Wrap に移動し、「reverse wrap」アイコンをクリックします。
フレックス子要素の設定
フレックス子要素のデフォルトのレイアウトは、フレックス親要素に設定されたフレックスレイアウトの設定に基づいています。ただし、フレックス子要素の場合はこれらの設定をオーバーライドすることができます：
- Size
- Alignment
- Order
フレックスの子のサイズを調整するには、子を選択し、スタイルパネル > フレックスの子 > サイズを調整します。サイズ調整には4つのオプションがあります：
フレックス子要素のサイズを変更する
フレックスの子のサイズを調整するには、子を選択し、Style panel > Flex child > Sizing を調整します。サイズ調整には4つのオプションがあります：
- Shrink flex child if needed (必要に応じてフレックス子要素を縮小する（オーバーフローを防ぐため）)
- Grow flex child if possible(可能な場合にフレックス子要素を拡大する)
- Don’t shrink or grow flex child(フレックス子要素を縮小または拡大しない)
- Custom grow and shrink behavior(カスタムな成長と縮小の動作を指定する)
すべてのフレックス子要素が Grow if possible、Shrink if needed、または Don’t shrink or grow のいずれかに設定されている場合、それらのサイズが調整された後の余白は、 Grow if possibleに設定されている子要素に均等に分配されます。
Shrink if needed(必要に応じて縮小)
Shrink if needed は、フレックス子要素の幅と高さのプロパティ（またはフレックス子要素内のコンテンツ、幅と高さが設定されていない場合）に基づいてフレックス子要素のサイズを調整します。これにより、余白が残っている場合にはフレックス子要素が柔軟であり、十分なスペースがない場合には最小限に縮小されるようになります。
Grow if possible(可能な場合に拡大)
Grow if possible は、フレックス子要素が拡大できるスペースがある場合に拡大するようにします。これにより、フレックス子要素はフレックス親要素内の余分なスペースを吸収することができます。
Don’t shrink or grow(縮小または拡大しない)
Don’t shrink or grow は、フレックス子要素の幅/高さプロパティに応じてサイズを調整し、完全に柔軟にします。フレックス子要素はオーバーフローの状況でも縮小することは許されません。
カスタムな成長と縮小の動作をカスタマイズ
また、子要素の成長と縮小の動作を完全にカスタマイズすることもできます。これにより、フレックス子要素がフレックス親要素内の他の子要素に対してどれだけ縮小または拡大するかが決まります。
Grow は、親要素内の余白スペースが分配される際に、フレックス子要素が他の子要素に対してどれだけ成長できるかを定義します。この値が0に設定されている場合、必要な範囲以上に成長することはありません。
Shrink は、負の空きスペースが分配される際に、フレックス子要素が他の子要素に対してどれだけ縮小できるかを定義します。この値が0に設定されている場合、オーバーフローの状況でも縮小されることはありません。
Basis は、flex-growまたはflex-shrinkが適用される前の要素のデフォルトサイズを決定します。これを特定の寸法（例：20%、250pxなど）またはAutoに設定できます。Autoに設定されている場合、フレックス子要素のデフォルトサイズは、幅または高さに基づいて（設定されている場合）、またはコンテンツに基づいています。Basisが特定の寸法に設定されている場合、要素のコンテンツまたは幅/高さは無視され、フレックス子要素は他のフレックス子要素とサイズを共有します。
フレックス子要素の配置を変更する
フレックスの子を選択し、 Style panel > Flex child > Alignで、フレックスの子の整列を調整できます。整列には6つのオプションがあります：
- Auto
- Top
- Center
- Bottom
- Stretch
- Baseline
注意: フレックス子要素を整列させるためには auto margin も使用できます。
フレックス子要素の順序を変更する
デフォルトでは、フレックス子要素はソースコード内で配置された順序通りに表示されます（この順序はナビゲータで確認できます）。しかし、異なるブレークポイントでデザインを調整したい場合には、フレックス子要素の順序を変更することが便利です。
フレックス子要素のデフォルトの順序を上書きするには、子要素を選択し、次にStyle panel > Flex child > Order に移動します。順序には以下の6つのオプションがあります:
- Don’t change — フレックス子要素をデフォルトの位置に保持します
- Make first — フレックス子要素をフレックス親要素の最初に配置します
- Make last —フレックス子要素をフレックス親要素の最後に配置します
- Customize order — カスタムな順序値を定義することで複数のフレックス子要素の表示順序を制御します
カスタムな順序値を使用して、フレックス子要素がフレックス親要素内で表示される順序を指定することができます。同じカスタムな順序値を持つフレックス子要素は、最初に配置された順序で配置されます。
カスタムな順序を使用する際には、最初の子要素や最後の子要素を指定するために Make first や Make last を使用しないでください。Make last はフレックス子要素の順序を-1に設定し、Make last はフレックス子要素の順序を1に設定します。カスタムな順序を使用する際には、1より大きい任意の数値は、Make last の順序が設定されたフレックス子要素の後にフレックス子要素を配置します。-1より小さい任意の数値は、Make lastの要素の前にフレックス子要素を配置します。