Flex Container は、Web ページでセクションレイアウトを設計および構築するのに役立つレイアウトコンポーネントです。 フレックスコンテナーを使用して、ボタン、テキスト、画像、その他のコンテナーなどのコンポーネントをグループ化できます。
フレックス コンテナーを追加する
フレックスコンテナーを Web ページに追加するには:
デザイン スタジオを開き、ご利用のページのコンテンツやコンポーネントを編集します。
編集するページを選択します。
フレックス コンテナ コンポーネントを追加するセクションを選択します。
編集可能なキャンバス エリアにカーソルを合わせ、コンポーネント パネルから フレックス コンテナー コンポーネントを選択します。
コンポーネントのグループを作成するには、ボタン や テキストなどの他のコンポーネントをフレックス コンテナーに追加します。
フレックス コンテナーのスタイルを設定したり構成したりすることもできます。
フレックス コンテナーを編集する
フレックス コンテナーを追加したら、フレックス コンテナー コントロールを選択してプロパティ バーを開き、フレックス コンテナーを編集します。
| Property | Description |
|---|---|
| 設計 | デザイン プロパティ を変更して、フレックス コンテナーのデザインをカスタマイズします。 |
| バックグラウンドの編集 | 選択したスタイリング テンプレートのカラーパレットに従って、背景の色を変更します。 また、背景画像を追加し、サイズや位置を調整することも可能です。 |
| 方向と配置を変更する | フレックスコンテナー内のコンテンツの位置を揃えて方向を変更します。 |
| その他 | セクションを複製するか、ページ内で上下移動するか、セクション全体を削除します。 |
デザイン プロパティ
デザイン スタジオでは次のデザイン プロパティを構成できます。
HTML でフレックス コンテナーを追加する
Web 用 Visual Studio Code (プレビュー) を使用すると、フレックス コンテナを Web ページの HTML に直接追加することもできます。
デザイン スタジオがカスタム flexbox div を認識してキャンバス編集を許可するようにするには、それらに CSS クラス ppFlexContainer を適用してください。
重要
ppFlexContainer クラスがないと、デザイン スタジオはカスタム div をフレックス コンテナー コンポーネントとして認識せず、デザイン スタジオで編集できません。
<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
<div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
<div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word;">
<div class="ppFlexContainer">
<button type="button" class="button1">Button</button>
<button type="button" class="button1">Button</button>
</div>
</div>
</div>
</div>
カスタム レイアウトの構築
複数のフレックス コンテナーを使用してカスタム レイアウトを構築できます。 たとえば、次のようなことが実現できる一例です。