フレックスコンテナを使用してコンポーネントをグループ化し、位置を合わせるする
Flex Containerは、Webページのセクション レイアウトを設計および構築するのに役立つ レイアウト コンポーネントです。 フレックス コンテナーを使用して、ボタン、テキスト、画像、その他のコンテナーなどのコンポーネントをグループ化できます。
フレックス コンテナーを追加する
Webページにflexコンテナーを追加するには:
デザイン スタジオを開き、ご利用のページのコンテンツやコンポーネントを編集します。
編集するページを選択します。
選択 フレックス コンテナー コンポーネントを追加するセクション。
編集可能なキャンバス エリアにカーソルを合わせ、コンポーネント パネルから フレックス コンテナー コンポーネントを選択します。
ボタン や テキストなどの他のコンポーネントをフレックス コンテナーに追加することで、コンポーネントのグループを作成できます。
フレックス コンテナーのスタイルを設定したり構成したりすることもできます。
フレックス コンテナーを編集する
フレックス コンテナーを追加したら、フレックス コンテナー コントロールを 選択 してプロパティ バーを開き、フレックス コンテナーを編集します。
| Property | プロパティ |
|---|---|
| 設計 | デザイン プロパティ を変更して、フレックス コンテナーのデザインをカスタマイズします。 |
| バックグラウンドの編集 | 選択したスタイリング テンプレートのカラーパレットに従って、背景の色を変更します。 また、背景画像を追加し、サイズや位置を調整することも可能です。 |
| 方向と配置を変更する | 位置を合わせる を使用して、フレックス コンテナー内のコンテンツの方向を変更します。 |
| その他 | セクションを複製するか、ページ内で上下移動するか、セクション全体を削除します。 |
デザイン プロパティ
デザイン スタジオでは次のデザイン プロパティを構成できます。
HTMLにフレックスコンテナを追加する
Visual Studio Code for the Web (プレビュー) を使用して、WebページのHTMLにflexコンテナーを直接追加することもできます。
デザイン スタジオでカスタムflexbox divを認識してキャンバス編集できるようにするには、 CSS クラス "ppFlexContainer" を適用します。
重要
ppFlexContainer クラスがないと、Design Studioはカスタムdivをflexコンテナー コンポーネントとして認識せず、Design Studioで編集できません。
<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>
カスタム レイアウトの構築
複数のフレックス コンテナーを使用してカスタム レイアウトを構築できます。 たとえば、次のようなことが実現できる一例です。