# Flex機能 ### Flex機能について このマニュアルでは、[Flex機能](https://help.pagefly.io/manual/flex-feature/)とその様々なシナリオでの適用について説明します。Flexはflexboxとしても知られており、コンテナ内の要素間でスペースを効率的に分配するために設計されたレイアウトモデルです。 PageFlyエディターでは、Flexを使用して、カラム、行、セクション内の要素を整理または配置できます。 詳細については、以下の動画チュートリアルで確認できます。 {% embed url="" %} ### レガシーレイアウト - Flex機能へのアクセス方法 コンテナのFlex機能を有効にするには、例えば製品情報を含むカラムでFlexを使用します。 * ステップ1: **カラム**（コンテナ）をクリックします。 * ステップ2: **スタイリング**タブに切り替えます。 * ステップ3: 表示タイプに**Flex**を選択します。 ![](/files/VCZFb2N6yvl8hjOl8nFm) ### Flex機能の設定方法 この機能は複雑なため、上級ユーザーのみに推奨されます。Flexを有効にすると、以下のオプションが表示されます。 * Direction（方向） * Wrap（折り返し） * Align Items（アイテムの配置） * Align Content（コンテンツの配置） * Justify Content（コンテンツの整列） 次に、各設定とその動作について説明します。 #### Flex Direction（方向） Flex Directionを使用すると、コンテナ内の要素を水平方向の行または垂直方向の列に配置できます。すべてのオプションはここにリストされています。 | **Option** | Description | | ------------------ | ----------------------------- | | **Row (default)** | すべての要素が水平方向に行として、左から右に表示されます。 | | **Row reverse** | Rowと同じですが、逆順（右から左）になります。 | | **Column** | すべての要素が垂直方向に列として、上から下に表示されます。 | | **Column reverse** | Columnと同じですが、下から上になります。 | これらのオプションの違いはここで確認できます。 ![](/files/Q2wDFz6ftfycIBLGQgpZ) #### Flex Wrap（折り返し） Flexを選択した場合、デフォルトでは、Flexアイテムはすべて1行に収まろうとします。これを変更して、必要に応じてアイテムを折り返すことができます。利用可能なすべてのオプションは以下のとおりです。 | **Option** | Description | | --------------------- | ------------------------------------------------------------------- | | **No Wrap (default)** | すべての要素が1行に表示されます。 | | **Flex wrap** | Flex要素は、上から下に複数の行に折り返されます。要素は、同じ行に留まるスペースがない場合にのみ折り返されることに注意してください。 | | **Wrap reverse** | Flex要素は、下から上に複数の行に折り返されます。 | これらのオプションの違いはここで確認できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcUgp571iRmdHHSC3KXiwT-xMWL_EKIF2LEfKEUFpniJKBto4E6Xr97gbRuGyKfZUv_LFirrKfdRQp-wCCvClmkw17JrTKy37sZakxsnWY83enLCB1a24LV5-CNw1YtPFQ3DkehT3yHuH7lN7F2jwkeyIOQQr4OoDL9YW2Co_P85QA.gif) #### Align Items（アイテムの配置） このオプションは、コンテナの軸に沿って要素がどのように配置されるかを決定します。すべてのオプションはここにあります。 | **Option** | Description | | --------------------- | ----------------------------- | | **Center** | すべての要素がコンテナの垂直方向の中央に配置されます。 | | **Flex start** | すべての要素がコンテナの垂直方向の開始位置に配置されます。 | | **Flex end** | すべての要素がコンテナの垂直方向の終了位置に配置されます。 | | **Stretch (default)** | すべての要素がコンテナに合わせて引き伸ばされます。 | | **Baseline** | すべての要素がコンテナのベースラインに配置されます。 | これらのオプションの違いはここで確認できます。 ![](/files/tOWorosqSYT4PyQm0sq8) #### Align Content（コンテンツの配置） 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コンテナ内で均等に分配されます。 | これらのオプションの違いはここで確認できます。 ![](/files/qe7Slr4phzHkPKaWikcB) #### Justify Content（コンテンツの整列） このオプションは、コンテナの水平軸に沿った配置を定義できます。テキストの行間に表示される空白を変更します。利用可能なすべてのオプションは以下のとおりです。 | **Option** | Description | | --------------------- | ---------------------------------------------------- | | **Center** | すべての要素がコンテナの水平方向の中央に配置されます。 | | **Flex start** | すべての要素がコンテナの水平方向の開始位置に配置されます。 | | **Flex end** | すべての要素がコンテナの水平方向の終了位置に配置されます。 | | **Stretch (default)** | すべての要素が残りのスペースを埋めるように引き伸ばされます。 | | **Space around** | すべての要素の前後および間に等しいスペースが確保されます。 | | **Space between** | すべての要素が均等に分配されます。最初の要素が開始位置に、最後の要素がコンテナの終了位置に配置されます。 | これらのオプションの違いはここで確認できます。 ![](/files/A5YoaUCl3Ii216XlCc8O) ### Gen 2レイアウト - Flex機能へのアクセス方法 {% hint style="warning" %} **重要事項**: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー課金モデル ([slot plans](https://help.pagefly.io/manual/pricing-plans/)) 専用に利用可能になります。 {% endhint %} PageFly 4.16バージョンでは、CSS Flexboxレイアウトモデルを使用した高度なエディターをFlexセクションおよびFlexブロックとともにリリースしました。より詳細なチュートリアルについては、[Page Editor – Styling Tab](https://help.pagefly.io/manual/elements-style-settings/%23gen-2-editor-styling-tab)の記事を読むか、[How To Use PageFly Gen 2 Editor with Flex Section](https://www.youtube.com/watch?v%3DMzA8dWTqz9o%26t%3D137s)の動画をご覧ください。 ### 一般的なケース #### 2つの要素を同じ行に配置する 一般的なケースとして、2つの要素を同じ行に配置したい場合があります。Flex機能はこれを実現するのに役立ちます。例として、製品価格要素と保存バッジを同じ行に配置します。 * ステップ1: **ブロック**を作成し、その中に製品価格と保存バッジを配置します。 * ステップ2: **ブロック**をクリックし、**スタイリング**タブで**Flex**機能を有効にします。 * ステップ3: **Flex Direction**をRowに設定します。 * ステップ4: 要素を垂直方向の中央に配置するには、Align Itemsパラメーターから**Center**を選択します。次に、水平方向のブロックの開始位置にアイテムを配置するには、Justify Contentの下でflex-startを選択します。 ![](/files/NRrcKR8NPmx2gxaNboc0) #### 要素をカラムの中央に配置する Flex機能を使用して、見出しや段落要素など、カラムまたはブロック内の要素を中央に配置できます。これを行うには、次の手順に従います。 * ステップ1: パンくずリストに移動し、**カラム**を選択します。 * ステップ2: **スタイリング**タブ > **表示**を選択し、**Flex**を選択して**Flex Direction: Column**に設定します。 * ステップ3: Align itemsとJustify contentの両方に**Center**を選択します。 ![](/files/8bgWvh9k6w4CUk7KlgPn)これらがFlex設定のすべての機能です。さらに質問がある場合は、ライブチャットサポートでお問い合わせください。 ### ヒントとベストプラクティス * 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コントロールが可能ですが、より厳格な構造に制限されています。 ### その他のリソース * [PageFly Element Styling | Ultimate Guide to Edit Effectively](https://help.pagefly.io/manual/elements-style-settings/) * [How to Use PageFly Custom Code Editor?](https://help.pagefly.io/manual/custom-code-editor/) * [7 Steps to Create a Homepage with PageFly](https://help.pagefly.io/manual/how-to-create-a-homepage-with-pagefly/) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/main-use-case/flex-feature.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.