センタリングボックスの概要

視覚的なガイドとして、配置ボックスを使用してフレックスとグリッドの子要素を揃えます。

センタリングボックス 3 x 3のグリッドが出現します スタイルパネル > レイアウト ディスプレイがフレックスまたはグリッドに設定されている場合。センターリング ボックスは、フレックスの親またはグリッドの視覚的表現として使用して、フレックスとグリッドの子要素を親コンポーネント内ですばやく配置できます。

まず、センタリングボックスを選択します 細胞 コンテンツを揃えたい場所をタップするか、 センタリングボックス これにフォーカスし、キーボードの矢印キーを使用してセル間を移動します。ボックス セルをダブルタップして中央揃えにしたり、クイック メソッドを使用してフレックスおよびグリッドの子要素をすばやく整列させたりすることができます。

センタリングボックスを操作すると、画面に調整内容が反映され、 バツ そして はい 軸ドロップダウンが更新され、現在の配置構成が表示されます。

簡単な方法

フレックス

  • 正当化を確立する(例:justify-content) 間のスペース: 中央揃えボックスのセルをダブルタップするか、 指示 (Macの場合) または コントロール (Windowsの場合)+中央揃えボックスをタップ 細胞
  • 配置を確立する(例:align-items) ストレッチ: オプション (Macの場合) または 代替 (Windowsの場合)+中央揃えボックスをタップ 細胞

フレックスの子要素の配置について詳しく説明します。

グリッド

  • 正当化を確立する(例:justify-items) ストレッチ: 中央揃えボックスのセルをダブルタップするか、 指示 (Macの場合) または コントロール (Windowsの場合) + タップ センタリングボックス 細胞
  • 配置を確立する(例:align-items) ストレッチ: オプション (Macの場合) または 代替 (Windowsの場合)+中央揃えボックスをタップ 細胞

グリッドの子要素の配置について詳しく説明します。

述べる: 特定の配置オプションは、中央揃えボックスからのみアクセスすることはできませんが、X 軸と Y 軸のドロップダウンからアクセスできます。
ユアン・マック