Align boxについて

今回はWebflowの便利な機能、Align boxについてご紹介します。

Align boxは表示がflexまたはgridに設定されている場合に、Style panelのLayoutに表示される 3 x 3 グリッドです。

flexまたはgridの視覚的表現としてAlign boxを使用すると、子要素を素早く簡単に整列させることができます。

まず、コンテンツを配置するAlign boxのセルをクリックするか、Align box内の任意の場所をクリックして、キーボードの方向矢印キーを使用してセル間を移動します。

ダブルクリックしてボックスセルを整列したり、ショートカットを使用してflexとgridの子要素を整列させることができます。

Align boxを操作すると、キャンバスに変更が反映されX軸とY軸のドロップダウンが更新されて現在の設定が反映されます。

‍

ショートカット

flex

• 位置揃え (justify-content) をspace betweenに設定

Align boxのセル、またはCommand (Mac の場合) またはControl (Windows の場合) をダブルクリックし、Align boxのセルをクリックします

• 整列 (align-items) をstretchに設定

Option (Mac の場合) またはAlt (Windows の場合) + Align boxのセルをクリックします

Grid

• 位置揃え (justify-content) をstretchに設定

整列ボックスのセル、またはCommand (Mac の場合) またはControl (Windows の場合) をダブルクリックし、Align boxのセルをクリックします

• 整列 (align-items) をstretchに設定

Option (Mac の場合) またはAlt (Windows の場合) + Align boxのセルをクリックします

注記

一部のalignmentオプションはAlign boxだけでは利用できませんが、X軸とY軸のドロップダウンからアクセスできます。

‍

いかがでしたでしょうか。

Align boxは視覚的に配置できる便利な機能です。

使いこなしてWebflowでの制作パフォーマンスを向上させましょう。

‍