Flex機能
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
このマニュアルでは、Flex機能とその様々なシナリオでの適用について説明します。Flexはflexboxとしても知られており、コンテナ内の要素間でスペースを効率的に分配するために設計されたレイアウトモデルです。
PageFlyエディターでは、Flexを使用して、カラム、行、セクション内の要素を整理または配置できます。
詳細については、以下の動画チュートリアルで確認できます。
コンテナのFlex機能を有効にするには、例えば製品情報を含むカラムでFlexを使用します。
ステップ1: カラム（コンテナ）をクリックします。
ステップ2: スタイリングタブに切り替えます。
ステップ3: 表示タイプにFlexを選択します。
この機能は複雑なため、上級ユーザーのみに推奨されます。Flexを有効にすると、以下のオプションが表示されます。
Direction（方向）
Wrap（折り返し）
Align Items（アイテムの配置）
Align Content（コンテンツの配置）
Justify Content（コンテンツの整列）
次に、各設定とその動作について説明します。
Flex Directionを使用すると、コンテナ内の要素を水平方向の行または垂直方向の列に配置できます。すべてのオプションはここにリストされています。
Option
Description
Row (default)
すべての要素が水平方向に行として、左から右に表示されます。
Row reverse
Rowと同じですが、逆順（右から左）になります。
Column
すべての要素が垂直方向に列として、上から下に表示されます。
Column reverse
Columnと同じですが、下から上になります。
これらのオプションの違いはここで確認できます。
Flexを選択した場合、デフォルトでは、Flexアイテムはすべて1行に収まろうとします。これを変更して、必要に応じてアイテムを折り返すことができます。利用可能なすべてのオプションは以下のとおりです。
Option
Description
No Wrap (default)
すべての要素が1行に表示されます。
Flex wrap
Flex要素は、上から下に複数の行に折り返されます。要素は、同じ行に留まるスペースがない場合にのみ折り返されることに注意してください。
Wrap reverse
Flex要素は、下から上に複数の行に折り返されます。
これらのオプションの違いはここで確認できます。
このオプションは、コンテナの軸に沿って要素がどのように配置されるかを決定します。すべてのオプションはここにあります。
Option
Description
Center
すべての要素がコンテナの垂直方向の中央に配置されます。
Flex start
すべての要素がコンテナの垂直方向の開始位置に配置されます。
Flex end
すべての要素がコンテナの垂直方向の終了位置に配置されます。
Stretch (default)
すべての要素がコンテナに合わせて引き伸ばされます。
Baseline
すべての要素がコンテナのベースラインに配置されます。
これらのオプションの違いはここで確認できます。
Align Contentを使用すると、コンテナの高さに余分なスペースがある場合に、Flexコンテナのラインを配置できます。
このオプションは、Flex Wrapがwrapまたはwrap-reverseに設定されている複数行コンテナにのみ影響することに注意してください。
すべてのオプションはここにリストされています。
Option
Description
Center
すべての要素がFlexコンテナの中央に向かって詰められます。
Flex start
すべての要素がFlexコンテナの開始位置に向かって詰められます。
Flex end
すべての要素がFlexコンテナの終了位置に向かって詰められます。
Stretch (default)
すべての要素が残りのスペースを埋めるように引き伸ばされます。
Space around
すべての要素がFlexコンテナ内で均等に分配され、両端に半分のスペースが確保されます。
Space between
すべての要素がFlexコンテナ内で均等に分配されます。
これらのオプションの違いはここで確認できます。
このオプションは、コンテナの水平軸に沿った配置を定義できます。テキストの行間に表示される空白を変更します。利用可能なすべてのオプションは以下のとおりです。
Option
Description
Center
すべての要素がコンテナの水平方向の中央に配置されます。
Flex start
すべての要素がコンテナの水平方向の開始位置に配置されます。
Flex end
すべての要素がコンテナの水平方向の終了位置に配置されます。
Stretch (default)
すべての要素が残りのスペースを埋めるように引き伸ばされます。
Space around
すべての要素の前後および間に等しいスペースが確保されます。
Space between
すべての要素が均等に分配されます。最初の要素が開始位置に、最後の要素がコンテナの終了位置に配置されます。
これらのオプションの違いはここで確認できます。
重要事項: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー課金モデル (slot plans) 専用に利用可能になります。
PageFly 4.16バージョンでは、CSS Flexboxレイアウトモデルを使用した高度なエディターをFlexセクションおよびFlexブロックとともにリリースしました。より詳細なチュートリアルについては、Page Editor – Styling Tabの記事を読むか、How To Use PageFly Gen 2 Editor with Flex Sectionの動画をご覧ください。
一般的なケースとして、2つの要素を同じ行に配置したい場合があります。Flex機能はこれを実現するのに役立ちます。例として、製品価格要素と保存バッジを同じ行に配置します。
ステップ1: ブロックを作成し、その中に製品価格と保存バッジを配置します。
ステップ2: ブロックをクリックし、スタイリングタブでFlex機能を有効にします。
ステップ3: Flex DirectionをRowに設定します。
ステップ4: 要素を垂直方向の中央に配置するには、Align ItemsパラメーターからCenterを選択します。次に、水平方向のブロックの開始位置にアイテムを配置するには、Justify Contentの下でflex-startを選択します。
Flex機能を使用して、見出しや段落要素など、カラムまたはブロック内の要素を中央に配置できます。これを行うには、次の手順に従います。
ステップ1: パンくずリストに移動し、カラムを選択します。
ステップ2: スタイリングタブ > 表示を選択し、Flexを選択してFlex Direction: Columnに設定します。
ステップ3: Align itemsとJustify contentの両方にCenterを選択します。
Flexスタイルを適用する前に、コンテンツの希望するレイアウト（例: 製品リストの場合は列、チーム紹介の場合は行）を決定してください。これにより、適切なFlexオプションを選択できます。
基本的なFlexレイアウト（単一方向の行や列など）から始めて、必要に応じて徐々に複雑さを加えてください。複雑なレイアウトは視覚的に管理するのが難しい場合があります。
Flexレイアウトが異なる画面サイズ（デスクトップ、モバイル）にどのように適応するかを考慮してください。
1. Flex機能とは何ですか？
Flex機能は、バウンディングボックスを使用してパーツの範囲を計算します。
2. Flex機能の利点は何ですか？
販売者が要素をより適切に配置するのに役立ちます。
3. レガシーレイアウトとGen 2レイアウトのFlex機能の違いは何ですか？
Flex Layout（Flexレイアウト）
対照的に、Gen 2エディターは、行と列の必要性を排除する完全に柔軟なコンテナシステムを中心に構築されています。Gen 2では、ネストされたFlexコンテナを使用できるため、要素の配置と整列においてより自由度が高まります。これにより、要素が特定のグリッドユニットに制限される必要のない、真にカスタムなレイアウトが可能になります。Gen 2 Flex Layoutは、以下のための高度なFlexコントロールを導入しています。
異なる画面サイズでの要素の整列と配置を完全に制御できます。
行/列の制限がなく、ユーザーはアイテムをより自由に配置できます。
Flex方向、折り返し、順序に対する制御が強化され、異なるデバイスにスムーズに適応する動的なレイアウトが可能になります。
Legacy Layout（レガシーレイアウト）
レガシーレイアウトでは、Flex機能は利用可能ですが、範囲がより限定されています。主に、行と列が事前に定義されたグリッドベースのシステム内で作業します。要素の整列と整列（例: 中央、ストレッチ）は可能ですが、ページの構造を行と列に依存する必要があります。レガシーエディターでは、方向（行または列）の設定やスペーシング（Justify ContentとAlign Itemsプロパティを使用）の調整など、基本的なFlexboxコントロールが可能ですが、より厳格な構造に制限されています。
これらがFlex設定のすべての機能です。さらに質問がある場合は、ライブチャットサポートでお問い合わせください。
