【日本語版Webflow University】 フレックスボックス

この投稿はWebflow社が提供する「Flexbox」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/intro-to-flexbox

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

Flexbox（フレックスボックス）は、設定した要素内のすべてのコンテンツに対して配列の制御を可能にし、デザイナーが苦労する多くのレイアウト問題を解決します。

レッスン概要

1. フレックスペアレント
2. フレックスチルドレン
3. フレックスペアレントの設定
4. フレックスチャイルドの設定

フレックスペアレンツ

フレックスペアレントは、フレックスボックスを設定した要素のことです。子要素を持つ任意の要素にフレックスボックスを設定することができます。

フレックスペアレントは次の方法で作成できます。

1. 要素を選択します
2. スタイルパネルからレイアウトセクションにある、Displayをflexにします

他のDisplayの設定とは異なり、親要素をフレックスにすると、内部の直接の子要素のレイアウトに影響を及ぼします。親要素にフレックスを設定すると、子要素はデフォルトで左寄せになり、水平に並べられます。

フレックスを設定した要素は、その直接の子要素内の子要素のレイアウトに影響を与えたり、変更したりすることはありません。

フレックスチルドレン

親要素をフレックスにすると、その要素の直接の子要素はフレックスチャイルドになります。フレックスチャイルドは親要素のレイアウト設定を上書きでき、個別にレイアウト設定を調整できます。

フレックスペアレント設定

親要素のDisplay設定をフレックスに変更すると、フレックスの親要素とそれを含む子要素の両方に、さまざまなレイアウトオプションが用意されます。

レイアウトの方向を設定できます

フレックスペアレントのレイアウトの方向は、デフォルトでは水平です。スタイルパネル > レイアウトのDirectionから方向を縦（Horizonal）に切り替えることができます。

レイアウトの方向を反転できます

スタイルパネルからDirectionで、フレックスペアレントの方向反転させることができます。

フレックスペアレントのレイアウトを反転させる機能は、右から左へ流れるサイトや、Mobile表示時など小さなブレイクポイントでレイアウトを反転させる必要がある場合に、特に有効です。

フレックスチャイルドの整列を調整できます

フレックスペアレント内のフレックスチャイルドの配置を変更するには、フレックスペアレントを選択し、希望する配置を選択します。

水平方向の配列オプション

子要素の水平配置を変更するには、次のいずれかの配置を選択します。

• Start：項目が左揃えになります
• Center：項目は中央揃えになります
• End：項目が右寄せになります
• Space between：項目は端から端まで均等に配置されます
• Space around：要素間と要素と端の間が均等になるように配置されます

垂直方向の配列オプション

フレックスチャイルドの垂直報告の配列を調整するには、次の整列オプションのいずれかを選択します。

• Start：項目は上部に整列されます
• Center：項目は垂直方向に中央揃えします
• End：アイテムは下に整列されます
• Stretch：アイテムはフレックスを設定した親要素の高さに合わせて広がります
• Baseline：アイテムはベースライン（テキストが乗っている見えない線）に沿って整列されます

列と行の間の距離感を調整する

列と行の間の距離感は、マージンやパディングを追加せずに、フレックスチャイルド間のスペースで調整します。列と行の間の距離感の大きさを調整するには、スタイルパネルで任意のギャップサイズを入力します。

一言メモ

ギャップサイズを素早く設定するには、Optionキー（Macの場合）またはAltキー（Windowsの場合）を押しながら、列または行のサイズフィールド上でマウスを左または右にドラッグしてください。

デフォルトでは、列と行ギャップサイズはロックされていますので、列のギャップサイズを変更すると、行のギャップサイズにも同じ値が入ります。

列と行のギャップサイズを個々に調整するには、ロックボタンをクリックしてロックを解除してください。

子要素のラップ

デフォルトでは、フレックスの子要素は常に1行に収まるように作られています。これを変更するには、レイアウト設定「Wrap」を使って子要素を折り返すようにします。

また、複数行のコンテンツを水平に揃えるためのさまざまなオプションが用意されています。

• Start：行はフレックスペアレントの上部に整列されます。
• Cener：行はフレックスペアレント内で垂直方向中央に配置。
• End：行はフレックスペアレントの下部に整列されます。
• Stretch：行が縦に広がり、垂直方向の空きスペースを埋めます。
• Space between：行は、上端から下端まで均等に配置されます。
• Space around：行は、他の行と端の間が均等になるように配置されます。

フレックスチャイルドの設定

フレックスチャイルドは、フレックスペアレント（Displayがフレックスに設定されている要素）の直接の子要素です。フレックスチャイルドのデフォルトのレイアウトは、フレックスペアレントに設定されたレイアウトに基づきます。

フレックスペアレント内のフレックスチャイルドのレイアウトを設定するには、その要素を選択し、サイズ、配置、表示順序を変更します。

フレックスチャイルドのサイズを変更する

Sizingでは、フレックスペアレントの中でフレックスチャイルドがどのように広がるかを指示できます。各フレックスチャイルドには個別にサイズ設定が可能で、次の通りさまざまなレイアウトオプションを利用できます。

• 必要に応じてフレックスチャイルドを縮小する（Grow）
• 可能限り、フレックスチャイルドを大きくする（Shrink）
• フレックスチャイルドを縮小・拡大しない（Don't shrink or grow）
• 拡大・縮小をカスタマイズする（Customize）

拡大と縮小をカスタマイズする

Sizingで拡大（grow）を選択すると、その要素は余分なスペースを埋めるように柔軟に大きさを変えてくれます。

すべてのアイテムがGrow、Shrink、Don't shrink or growのいずれかである場合、アイテムがサイズ調整された後の残りのスペースは、Growを持つアイテムに均等に分配されます。

縮小を選択すると、アイテムの幅/高さのプロパティに基づいてサイズを設定します。

これにより、この要素は、空きスペースが残っていても広がらず、十分なスペースがないときは最小限のサイズに縮小することができるようになります。また、整列や自動マージンもフレックスチャイルドに使用することができます。

Don't shrink or grow を設定すると、アイテムはその 幅/高さに応じたサイズになりますが、完全にフレキシブルではなくなります。これはflex: initialと似ていますが、オーバーフローの状況でも縮小されないという点が異なります。

要素の拡大・縮小を完全にカスタマイズすることを選択した場合、フレックスチャイルドが他のフレックスチャイルドと比較してどのくらい縮小・拡大するかを数値で入力します。

Growに値を設定することで、親要素内で空き領域ができたときに、フレックスチャイルドが他のフレックスチャイルドと比較してどの程度大きくなることができるかを定義することができます。この値が0に設定された場合、他のフレックスチャイルド以上に大きくなることはありません。Shrinkに値を設定すると、フレックスペアレントに対して、フレックスチャイルドが横にはみ出るくらいに大きくなっている場合に、値を設定したフレックスチャイルドが他のフレックスチャイルドに対してどれだけ縮小できるかを定義します。この値が0に設定されている場合、オーバーフローの状況でも縮小されることはありません。また、Basis値には、flex-growやflex-shrinkが効く前の要素のデフォルトサイズを設定することができます。これは、特定の幅/高さ（例：20％、250pxなど）またはAutoに設定することができます。Autoに設定すると、フレックスチャイルドのデフォルトサイズは、その幅、高さ（設定されている場合）、またはそのコンテンツに基づく大きさになります。特定の幅/高さに設定すると、要素のコンテンツまたは既に設定されている幅/高さが無視され、フレックスチャイルド間でサイズが共有されます。

フレックスチャイルドの順番を変更する

フレックスチャイルドの並び替えは、モバイルデバイスのユーザーにデスクトップデバイスのユーザーと異なるコンテンツを表示させたい場合に便利です。デフォルトでは、フレックスチャイルドはナビゲーションパネルに配置されたのと同じ順序で表示されます。これを変更するには、プリセットまたはカスタムオプションを使用します。

フレックスチャイルドの順序設定項目は次の通りです。

• Don’t change：フレックスチャイルドの順序はデフォルトの設定を維持します
• First：フレックスペアレント内で指定したフレックスチャイルドが最初に表示されるようになります
• Last：フレックスペアレント内で指定したフレックスチャイルドが最後に表示されるようになります
• Customize order：カスタム順序値を定義して、複数のフレックスチャイルドの表示順序を制御できます

順序のカスタマイズ

カスタムオーダー（Customize order）は数値で定義でき、フレックスコンテナ内のフレックスチャイルドの表示順を指定します。同じカスタムオーダー値を持つフレックスチャイルドは、元々配置されている順番でレイアウトされます。

カスタムオーダーを使用する場合、プリセットでリストの最初や最後の要素を指定しないでください。 "First "を指定するとフレックスチャイルドの順序が-1され、"Last "を指定すると順序が+1されます。この場合、カスタムオーダーを1より大きい数値を指定すると、オーダーがlastに設定されている要素の後にその要素が配置されます。1より小さい数値は、firstに設定された要素の前に配置されます。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。

‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

‍

‍