フレキシブルボックス

フレキシブル ボックス モデル (一般にフレックスボックスまたはフレックスと呼ばれる) は、コンテナー内で要素を配置する方法を提供します。フレックスボックスを使用すると、垂直方向または水平方向のいずれかの単一の次元で効率的なレイアウト制御が可能になります。これは表示プロパティとして機能し、さまざまな要素にフレックスボックスを適用できるようにします。

このチュートリアルでは、次のトピックについて説明します。

1. フレックスにおける親要素と子要素
2. 親フレックスプロパティの設定
3. 子フレックスプロパティの設定

Flex の親要素と子要素

要素にフレックスボックスを使用する場合、通常は子要素の配置を管理するために包括的なコンテナーに適用されます。フレックスボックスを使用するコンテナー要素は「フレックス親」と呼ばれ、フレックス親の直接の子要素は「フレックス子」と呼ばれます。

他の要素を含む任意の要素をフレックス親として指定できます。フレックス親を作成するには:

1. キャンバス上で目的の要素（セクション、divブロックなど）を選択します。
2. に移動 スタイルパネル > レイアウト > 画面
3. クリック フレックス

代替表示設定とは異なり、親要素でフレックスボックスを有効にすると、その直接の子要素のレイアウトに影響します。デフォルトでは、親要素でフレックスボックスを有効にすると、子は左揃えになり、水平方向に隣り合って配置されます。この動作をさらに調整するには、フレックスの親設定を使用します。

ご注意ください: フレックスボックスを利用するように設定された要素は、直接の子要素内の子のレイアウトを変更しません。

親フレックスプロパティのカスタマイズ

親要素にフレックスボックスを適用すると、フレックス親要素とその子要素の両方でさまざまなレイアウト オプションが利用できるようになります。

• 方向
• ラッピング
• アライメント
• 間隔

方向の設定または反転

デフォルトでは、フレックス親はコンテンツを左から右の水平方向に配置します。この方向を変更するには、フレックス親を選択して スタイルパネル > レイアウト > 方向どちらかを選択してください 水平 または 垂直 （それぞれ「矢印”アイコンをクリックします。

また、フレックス親内のフレックス子の方向を反転させることもできます。フレックス親を選択し、 スタイルパネル > レイアウト > 方向をクリックし、 落ちる矢印 発表する ラッピング オプション。ここで選択できます 右から左に > 単一行 または 下から上へ > 単一列このアクションにより、フレックスの子の配置が変更され、元の最初の要素が最後になり、2 番目の要素が最後から 2 番目の位置に移動するように位置が切り替わります。親の方向を反転すると、右から左のレイアウトや小さいディスプレイ用に設計する場合に役立ちます。

追加情報： フレックス親の方向を反転しても、document 構造内のフレックス子の順序は変更されません。視覚的な順序と DOM の順序の不一致により、Web サイトの訪問者が混乱する可能性があります。

Flex の子要素のラップまたはラップ動作の調整

以内 ラッピング メニューには、方向と折り返し設定を同時に制御するオプションがあります。デフォルトでは、フレックスの子は1行に収まるようにするため、親コンテナからオーバーフローする可能性があります。これに対処するには、子の折り返しを有効にします。フレックスの親を選択し、 スタイルパネル > レイアウト > 方向をクリックし、 ドロップダウン矢印 アクセスするには 包む 落ちる。

ここでは、さまざまな 包む コンテンツをどのように整理したいかに応じた選択肢:

• 左から右へ
• 右から左に
• 上から下へ
• 下から上へ

左から右へ

次のオプションを使用して、コンテンツを左から右に水平に配置できます。

• ラップダウン — 親の幅を超えるフレックスの子は、下の新しい行に誘導されます
• まとめ — 親要素の幅を超えるフレックス子要素は、上の新しい行に送られます

右から左に

次のオプションを使用して、コンテンツを右から左に水平に配置できます。

• 単一行 (折り返しなし) — フレックスの子要素の順序を逆にし、余分な要素を新しい行に折り返さない。
• ラップダウン — フレックスの子要素の順序を逆にし、親要素からはみ出したコンテンツを新しい行の下に折り返します。
• まとめ — フレックスの子要素の順序を逆にし、親要素を超えるコンテンツを新しい行に折り返します。

上から下へ

次のオプションを使用して、コンテンツを上から下に垂直に配置できます。

• 右に折り返す — 親の高さを超えるコンテンツは、右側の新しい列に折り返されます
• 左折り返し — 親の高さを超えるコンテンツは、左側の新しい列に折り返されます

下から上へ

次のオプションを使用して、コンテンツを下から上に垂直に配置できます。

• 単一列 (折り返しなし) - フレックスの子要素を新しい列に折り返さずに順序を逆にします。
• 右に折り返す — フレックスの子の順序を逆にし、親の高さを超えるコンテンツを右側の新しい列に折り返します。
• 左折り返し — フレックスの子の順序を逆にし、親の高さを超えるコンテンツを左の新しい列に折り返します。

フレックスの子要素の整列

フレックス子の複数の行または列を揃えることができます。 スタイルパネル > レイアウト > アライメント.

の 配置ボックス （つまり、3 x 3グリッド）を使用すると、フレックスプロジェニター内のフレックス子孫をすばやく調整できます。 バツ そして はい 軸ドロップダウンには、配置ボックス内で指定した値が表示されます。配置ボックスの詳細をご覧ください。

一部の代替手段は、 ボックスを揃える、しかし、 バツ そして はい 軸ドロップダウン。各ドロップダウンで使用できる位置合わせの選択肢は、フレックス コースが水平か垂直か (つまり、フレックス オフセンタの行または列のどちらを位置合わせするか) によって異なります。

水平方向

フレックスコースが水平に定義されている場合、 バツ 軸ドロップダウンには、以下の配置オプションが用意されています。

• 左 — フレックス子孫はフレックス祖先の左側に並びます
• 中心 — フレックス子孫はフレックス祖先の中心に位置する
• 右 — フレックス子孫はフレックス祖先の右側に並びます
• 間のスペース — フレックス子孫は右端と左端から均等に間隔をあけて配置されます
• 周囲のスペース — フレックス子孫は他の列や端の間で均等に分散されます

の はい 軸ドロップダウンには、フレックス子孫の水平行を揃えるための次のオプションがあります。

• 上 — フレックス子孫はフレックス祖先の上部に整列する
• 中心 — フレックス子孫はフレックス祖先の中心に位置する
• 底 — フレックス子孫はフレックス祖先の下部に整列する
• ストレッチ — 子孫を曲げて伸ばし、空いている垂直空間を占有する
• ベースライン — フレックスの子要素はベースライン、つまりテキストが置かれている見えない線に沿って配置されます

垂直方向

フレックスコースが垂直に設定されている場合、 バツ 軸ドロップダウンでは、次の配置オプションが提供されます。

• 左 — フレックス子孫はフレックス祖先の左側に並びます
• 中心 — フレックス子孫はフレックス祖先の中心に位置する
• 右 — フレックス子孫はフレックス祖先の右側に並びます
• ストレッチ — 子孫を曲げて伸ばし、空いている水平空間を占有する
• ベースライン — フレックスの子要素はベースライン、つまりテキストが置かれている見えない線に沿って配置されます

プロのヒント: 垂直ベースライン配置により、特に垂直テキストの方向が一般的または好まれる言語やレイアウトで、垂直テキスト要素の読みやすさが向上します。

の はい 軸ドロップダウンには、フレックス子孫の垂直列を揃えるための次のオプションがあります。

• 上 — フレックス子孫はフレックス祖先の上部に整列する
• 中心 — フレックス子孫はフレックス祖先の中心に位置する
• 底 — フレックス子孫はフレックス祖先の下部に整列する
• 間のスペース — フレックス子孫は上端と下端から均等に間隔をあけて配置されます
• 周囲のスペース — フレックス子孫は他の列や端の間で均等に分散されます

フレックス子孫の間にギャップを追加する

ギャップを使用すると、余白やパディングを追加せずにフレックス子要素間のスペースを定義できます。列と行の間のギャップのサイズを変更するには、フレックス親要素を選択して、 スタイルパネル > レイアウト > ギャップ.

デフォルトでは、列と行の間隔は同期されています。つまり、列の間隔のサイズを調整すると、行の間隔のサイズも自動的に同じ値に揃えられます。ロック” アイコンをクリックすると、列と行の間隔が自動的に調整されます。

プロのヒント: ギャップサイズを素早く拡大または縮小するには、 ギャップ スライダーまたは長押し オプション (Macの場合) または 代替 (Windows の場合) 列または行フィールド上でマウスを左または右にスライドします。

フレックスオフスプリング調整

フレックス子孫のデフォルトの配置は、フレックス祖先で指定されたフレックス レイアウト設定に基づいています。ただし、フレックス子孫のこれらの設定を置き換えることができます。

• サイズ
• アライメント
• 注文

フレックス子孫のサイズを変更する

フレックス子孫のサイズを微調整するには、子孫を選択してから スタイルパネル > フレックスの子孫 > サイズサイズには 4 つのオプションがあります。

• 必要に応じてフレックス子孫を縮小します（オーバーフローを回避するため）
• 可能であればフレックス子孫を拡大する
• フレックス子孫を縮小または拡大しないでください
• 成長と収縮の動作をカスタマイズする

すべてのフレックス子孫がどちらかに固定されている場合 可能であれば拡大する, 必要に応じて縮小する、 または 縮小も拡大もしない、サイズ調整後の残りのスペースは、子孫セットに公平に分配されます。 可能であれば拡大する.

必要に応じて縮小する

必要に応じて縮小する フレックス オフスプリングのサイズを、幅と高さのプロパティ (または、幅と高さが指定されていない場合はフレックス オフスプリング内のコンテンツ) に基づいて設定できるようになります。これにより、余分なスペースが残っている場合はフレックス オフスプリングが固定され、スペースが不足している場合は最小サイズに縮小されます。

可能であれば拡大する

可能であれば拡大する 利用可能なスペースがある場合、フレックス子孫が拡張できるようにします。これにより、フレックス子孫はフレックス祖先内の余分なスペースを吸収できます。

縮小も拡大もしない

縮小も拡大もしない フレックス オフスプリングのサイズを幅/高さのプロパティに応じて変更できるため、フレックス オフスプリングは完全に柔軟性がなくなります。フレックス オフスプリングは、オーバーフロー シナリオの場合でも、拡大または縮小できません。

成長と収縮の動作をカスタマイズする

完全に 成長と収縮の動作をカスタマイズする 子要素の。これにより、フレックス子がフレックス祖先内の他の子と比較してどの程度縮小または拡大するかが決まります。

の 育つ 値は、親要素内の余剰スペースが割り当てられた場合に、フレックス子要素が他の子要素に対して拡張できる範囲を決定します。値が 0 に定義されている場合、必要以上に拡張されることはありません。

の 縮む 値は、負のスペースが割り当てられたときに、フレックス子孫が他の子孫に対してどれだけ縮小できるかを決定します。値が 0 に設定されている場合、オーバーフローのシナリオでも縮小されません。

のベース 値は、flex-growまたはflex-shrinkの影響を受ける前の要素の初期サイズを設定します。これを特定の寸法（例：20%、250pxなど）に割り当てるか、自動に割り当てるかを選択できます。自動に設定すると、フレックス子の初期サイズは、幅または高さ（指定されている場合）またはそのコンテンツによって決定されます。 ベース 値に特定の寸法が割り当てられると、要素のコンテンツまたは幅/高さは無視され、フレックスの子は同じフレックス コンテナー内の他のフレックスの子と比例してサイズを共有します。

フレックス子の配置を変更する

フレックス子の配置を変更するには、子を選択してから スタイリングパネル > フレックスチャイルド > 整列と順序配置には 6 つの選択肢があります。

• 自動（デフォルト設定）
• 上
• 中心
• 底
• ストレッチ
• ベースライン

ヒント： フレックスの子要素を整列させるために自動マージンを利用することもできます。

フレックス子の順序を変更する

デフォルトでは、フレックスの子要素はソース コード内での出現順に表示されます (順序はナビゲーターで確認できます)。フレックスの子要素を並べ替えると、さまざまな画面解像度に合わせてデザイン要素を調整するときに便利です。

フレックス子のデフォルトの順序を変更するには、子を選択して スタイリングパネル > フレックスチャイルド > 注文注文オプションは6つあります。

• 現在の秩序を維持する — フレックス子を元の位置に保持します
• 初め — フレックスコンテナ内でフレックス子を最前面に移動する
• 最後 — フレックスコンテナ内でフレックス子を背面に移動する
• 注文をカスタマイズ — 特定の順序値を指定して、複数のフレックス子要素の配置をカスタマイズできます。

フレックス コンテナー内のフレックスの子要素の配置を指定するカスタム順序に一意の数値を割り当てることができます。同じカスタム順序値を共有するフレックスの子要素は、元の配置に基づいて配置されます。

カスタムオーダーを利用する場合は、 初め または 最後 最初または最後の子要素を指定します。 初め フレックス子に-1の順序を割り当てますが、 最後 1の順序を割り当てます。カスタム順序付けを使用する場合、1より大きい値は、順序が1のフレックス子の後に配置されます。 最後-1未満の値の場合、フレックス子要素は、 初め.

ヒント： フレックスの子の順序を変更する場合、順序は変更されないことに注意してください。これは、要素の視覚的な順序と DOM 構造が揃わない可能性があり、Web サイトの訪問者に混乱を引き起こす可能性があることを示しています。