Wix Studio エディタ：フレックスボックスを追加・設定する
読了時間：2分
フレックスボックスを使用して、サイトコンテンツの表示を合理化しましょう。フレックスボックスはレスポンシブコンテナで構成されるレイアウトツールで、訪問者の画面サイズに合わせて自動的に調整されます。
ステップ 1 | フレックスボックスを追加する
「追加」パネルを開いてフレックスプリセットを選択し、ページにドラッグします。表示するコンテンツの種類に応じてデザインを選択できます。（例：画像のみ、画像とテキストなど）
フレックスボックスを追加する方法：
- エディタ左側で「要素を追加」
をクリックします。 - 「レイアウトツール」をクリックします。
- 「フレックスボックス」をクリックします。
- 選択したフレックスボックスをページにドラッグアンドドロップします。
動作を確認しましょう：
キャンバス上のハンドルをドラッグして、フレックスボックスのコンテンツがブレイクポイント間でシームレスに再編成される様子を確認します。
ステップ 2 | フレックスボックスにアイテムを追加する
フレックスボックスは、レスポンシブコンテナであるいくつかのアイテムで構成されています。フレックスボックス内のアイテム数を変更でき、使用可能なスペースに合わせてアイテムのサイズが自動的に変更されます。
新しいアイテムを追加するには、「アイテムを追加」をクリックするか、要素を設定パネルの「アイテムを管理」を使用できます。
ステップ 3 | フレックスボックスに要素を追加する
アイテムに要素を追加して、フレックスボックスに表示する内容を選択します。異なるブレイクポイントの要素を表示・非表示にして、デバイスに関係なく訪問者にユニークな体験を提供することができます。
アイテムに要素を追加する方法：
- エディタ左側で「要素を追加」 をクリックします。
- 追加したい要素の種類を選択します。
- 選択した要素をクリックしてページに追加します。
- 要素をフレックスボックスアイテムにドラッグし、「貼り付け」が表示されたらドロップします。
次のステップ：
フレックスボックスをカスタマイズ・管理して、コンテンツを自由に表示します。
お役に立ちましたか？
|