フレックスボックスを使用して要素を整列させる

始める前に: flexbox の紹介をご覧ください。

このチュートリアルでは、次のことを学びます。

1. 個々の要素を中央に配置するテクニック
2. 複数の要素を中央に配置する方法

個々の要素を中央に配置する方法

親コンテナー内で 1 つの要素を垂直方向と水平方向の両方で中央揃えにするには、次の手順を実行します。

1. キャンバスまたはナビゲータで親コンテナを識別する
2. 案内する スタイルパネル > レイアウト > 画面
3. 押し続ける フレックス
4. を選択 中心細胞 の中に 配置ボックス （また、 中心 両方から バツ そして はい軸 ドロップダウン）

上記の手順を適用して、コンテナー内に複数の子要素を含む個々の要素を中央に配置することもできます。たとえば、コンテナーをその中の見出し、段落、リンク ブロックに合わせて配置します。

複数の要素を中央に配置する方法

フレックスボックスを使用すると、複数の要素をコンテナ内の中央に配置することができます。これは、たとえば、水平方向と垂直方向の両方で配置して中央に配置する必要がある 2 つのカード要素がある場合に便利です。

1. キャンバスまたはナビゲータで親コンテナを識別する
2. 案内する スタイルパネル > レイアウト > 画面
3. 押し続ける フレックス
4. 縦の「下矢印”アイコンをクリックしてフレックス方向を垂直に調整します
5. を選択 中心細胞 の中に 配置ボックス （また、 中心 両方から バツ そして はい軸 ドロップダウン）

flexbox についてさらに詳しく知る。