FlexBoxとは（そしてそれを使用する必要がある理由）

一日中クリーンセクションを構築できますが、すべての画面サイズにまたがる要素を調整することで、意図的なデザインよりも試行錯誤のように感じることができます。

FlexBoxはそれを修正します。マージンやパディングを常に調整することなく、容器の内側に要素がどのように座って、ストレッチ、縮小、包装がどのように座っているかを真に制御できます。このガイドでは、FlexBoxの仕組み、レイアウトがどのようにレイアウトを簡素化するか、および単一のコードを書くことなくDivi 5内で視覚的に使用する方法を分析します。

FlexBoxとは何ですか

フレキシブルボックスレイアウトの略であるFlexBoxは、要素の整列と容器内のスペースを単純化するレイアウトモデルです。 FlexBoxを使用すると、各アイテムをマージンまたは固定幅を使用して手動で配置するのではなく、利用可能なスペースに応じてこれらの要素の動作を定義できます。

余分な部屋を埋めるために要素が成長する必要がありますか？スペースがきつくなったら縮小しますか？彼らはもはや収まらないときに次の行に包むべきですか？コンテナとその子供に適用する一連のプロパティを通じて、これらの選択を行います。これは、レイアウトの応答方法を決定する方法です。

これを理解するために実用的な例を取りましょう。水平列の中に3つのボタンがあるとします。 FlexBoxを使用すると、それらすべてをコンテナ内に均等に中央に配置できます。

中央のボタンは、他のボタンよりも多くのスペースを占有する必要があると判断します。

または、画面が狭くなったときにボタンを自動的にスタックする必要があります。

FlexBoxは、Justify-Content、Flex-Rap、Flex-Growなどのシンプルなプロパティでこれをすべて可能にします。

さらに、ビルダーでの実際の位置を変更せずに、アイテムの間隔を置き、異なる軸上で整列し、視覚的に順序付けられる方法を制御できます。コンテンツを中央に配置したり、コンテナの上部または下部に押したり、1つのアイテムを他のアイテムとは異なる方法で調整したり、ブレークポイント全体で注文全体を逆にすることもできます。

あなたは思うかもしれません：私はすでにマージンとパディングでこれをすることができませんか？

あなたが正しい。要素を手動で中心にするか、カスタム幅でサイズを調整できます。ただし、これらの方法は、各アイテムを個別に配置することに依存しています。画面サイズごとに、各要素を一度に1つずつ調整します。

FlexBoxはその処理を完全にシフトします。各要素を個別に扱う代わりに、コンテナレベルでレイアウトルールを1回定義できます。子供がさまざまなシナリオでどのように振る舞うべきかを容器に伝え、必要に応じて調整します。

このアプローチにより、レイアウトは、特に画面サイズが変更されたり、新しいモジュールが追加されたりすると、デザインが進化するにつれて、レイアウトがより一貫性があり、管理しやすくなり、柔軟になります。

フレックス方向がアラインメントにどのように影響するか

FlexBoxで最初に行う選択の1つは、連続しても列であろうと、要素が流れるようにする方向です。 Flex-directionプロパティはこれを設定し、アイテムがコンテナ内の整列、ラップ、スペースを定義します。

Justify-ContentやAlign-Contentなどの一般的な特性は、どの方向が設定されているかに完全に依存するため、これをよりよく理解しましょう。ブラウザのデフォルトのレイアウトではなく、FlexBox： Main AxisとCross軸によって作成された軸は動作します。主軸は、フレックス方向に設定した方向に従います：行の水平、列の垂直。交差軸は逆になります：行の垂直、列の水平。

そのため、方向が列に設定されると、主軸は左から右に動作します。つまり、Justify-Contentは行を横切って要素を移動し、項目を調整することで、それらがその行内で垂直に整列する方法を制御します。

方向を列に切り替えると、アライメントロジック全体がフリップされます。メイン軸は上部から下に走るようになります。つまり、正当なコンテンツがアイテムを垂直に並べ、項目を左から右に調整することを意味します。

最初はわずかに混乱を感じることがありますが、メイン軸と交差軸が方向にどのように反応するかを確認すると、クリックします。パターンの発見を開始すると、レイアウトの決定はより直感的に感じられます。練習中に物事を再確認したい場合は、以下に簡単な参照表があります。

構文と一般的なフレックスボックスプロパティ

コンテナのディスプレイプロパティをブロックからフレックスに切り替えて、フレックスボックスをアクティブにします。これを行うと、ブラウザは行、ボタン、カード、アイコンなどの内部要素の扱いを開始します。

.container {
display: flex;
}

そこから、異なるフレックスボックスプロパティを使用して動作を制御します。たとえば、Justify-Contentは、メイン軸に沿ってアイテムの間隔を決定する方法を決定します（これは、デフォルト、Flex-Direction：Row）により水平に設定されます）。 Flex-Startを使用してアイテムを左に並べ、Flex-Endを右に押し、中央に押し出すか、その中心、またはその間とスペースアラウンドを均等に広げます。

デフォルトでは、FlexBoxはすべてのアイテムを1行に合わせようとします。多すぎると、フレックスシュリンクの設定に基づいて収縮するように収縮し、十分に収縮できない場合は、容器にオーバーフローする可能性があります。これを防ぐには、フレックスラップをオンにして、アイテムが1つに詰め込むのではなく、新しいラインに移動するようにします。

これらの2つのプロパティがレイアウトの問題を解決できる多くのユースケースについては、すでに考えることができます。しかし、さらに多くのものがあり、それぞれがサイズ、順序、アライメント、および間隔を具体的に制御することができます。

これらが実際に遊び心のある実践的な方法でどのように機能するかを知りたい場合は、FlexBox Froggyを試してみてください。カエルを池の周りに移動するために本物のフレックスボックスコードを適用する楽しい小さなゲームです。途中で、推測をやめ、各プロパティが何をしているのかを正確に認識し始めます。

FlexBoxを使用する理由

今では、FlexBoxがレイアウトがスペースにどのように反応するかをどのように変えるかを見てきました。しかし、本当の価値は、そのシフトがあなたがより簡単に行うことを可能にするものから来ています。 FlexBoxは、頑固なレイアウトの課題をシンプルで再利用可能なパターンに変えます。

• 単純化されたアライメント：右マージンの調整やヘルパークラスに依存することなく、Justify-ContentおよびAlign-Items CenterまたはSpace Itemsなどのプロパティ。
• デフォルトで応答する：スペースに応じて、アイテムは自然に成長、縮小、またはラップします。これにより、ブレークポイントを追加せずに適応するクリーンなレイアウトが発生します。
• 自動間隔とサイジング：要素がFlex-Grow、Flex-Shrink、Flex-Basisなどのプロパティとスペースを共有する方法を制御し、固定ではなくレイアウト流体を作成します。
• HTMLを変更せずに並べ替える： HTMLに触れることなく、要素の視覚順序を変更できます。構造はきれいなままですが、レイアウトはさまざまな画面に調整されます。
• レイアウトハッキングの減少：フロート、クリアフィックス、または高さマッチングスクリプトは必要ありません。 FlexBoxは、それらを最新の信頼できるオプションに置き換えます。

また、すべての主要なブラウザでサポートされているため、FlexBoxは効率的であるだけでなく、信頼性もあります。これにより、現実世界のプロジェクトにとって、近代的で信頼性の高い選択肢になります。

FlexBoxがグリッドよりも優れている理由

Gridは、FlexBoxのようなもう1つの人気のあるレイアウトシステムです。ただし、両方とも異なるユースケース用に構築されています。

たとえば、Gridは、行と列の両方を制御する必要がある2次元レイアウト用に設計されています。製品のショーケース、イメージギャラリー、雑誌スタイルの編集レイアウトは、両方の軸にわたってしっかりと整合した構造に依存するため、グリッドの例です。

グリッドを定義することから始めます。列と列の数と、それぞれがどれだけ幅または背が高いか。次に、各アイテムをその構造に配置します。

これはグリッドレイアウトです。アイテムは、固定された間隔と割合で、列と列の両方の軸に並べられています。

しかし、すべてのレイアウトにそのレベルの計画が必要なわけではありません。

ほとんどの場合、UIセクションは単一の方向に流れます。カード、アイコンプラステキストブロック、およびナビゲーションリンクの行は、2つではなく1つの軸に従います。それがまさにFlexBoxが収まる場所です。

フレックスボックスのレイアウトでは、カードは一方向（行または列）に並べられ、コンテナルールに基づいてラップされ、間隔を空けます。

事前にレイアウト全体をマップする必要はありません。単に単一の軸に沿ってアイテムがどのように動作するかをコンテナに伝えるだけで、FlexBoxはそれを処理します。

したがって、剛性のあるグリッドに本当に依存するものを設計しない限り、FlexBoxはより速く、よりシンプルで、より柔軟な選択になることがよくあります。

Divi 5のFlexBox

FlexBoxについてこれまでに学んだことはすべて素晴らしいですが、特にDiviのような視覚ビルダーを使用してサイトを構築した場合、レイアウトの調整ごとにカスタムCSSを書くことはしたいことではありません。

そのため、Divi 5に組み込みのFlexboxコントロールが含まれるようになりました。タブを切り替えたり、CSSを手動で追加する必要はありません。これらすべて、さらには高度なレイアウト動作さえ、視覚ビルダーに組み込まれており、コーディングと圧倒的なバックエンドを差し引いています。

YouTubeチャンネルを購読してください

簡単に言えば、構文やプロパティ名を覚えておく必要はありません。インターフェイスから必要なものを選択してください。任意のセクション、行、または列をクリックし、[デザイン]タブに移動し、レイアウト> [レイアウト]スタイルの下で、 [Flexを使用してください。

これにより、新しいレイアウトコントロールのセットが開きます。これらは、通常CSSで書くコアフレックスボックスプロパティですが、クリック可能なオプションとして書かれています。変更をライブでテストし、コンテンツがどのように反応するかを確認できます。

したがって、FlexBoxコードの1行を書いたことがない場合でも、何も見逃すことはありません。 DIVI 5は、同じレベルのコントロールで同じレイアウトコントロールを視覚的に提供しますが、より簡単になります。

Divi 5のFlexboxシステムに関するすべてを学びます

新しい行構造

他のWebビルダーも持っているのになぜDivi？多くのWebビルダーはFlexBoxをレイアウトオプションとして提供していますが、Divi 5は異なってアプローチします。これは、既存のシステムの上に階層化された機能ではありません。今では、ビルダーがどのように機能するかの核心です。

レイアウトエンジン全体が、FlexBoxがその基礎にゼロから再構築されています。その結果、レイアウト動作は、意図的に設計されたレイアウトロジックに従うため、より一貫性があり、予測可能に感じます。

たとえば、Divi 5に新しいセクションまたは行を追加すると、すぐに何か違うことがわかります。新しい構造。それぞれがデフォルトでFlexBoxで実行されるようになりました。つまり、アラインメント、間隔、および応答性が最初からよりインテリジェントに処理されることを意味します。

追加する新しいデザイン要素のためにFlexをオンにする必要はありません。そして、あなたがそうするとき、古いレイアウトを編集している間、アライメントと間隔のツールはすぐに管理しやすくなります。

また、変更列構造を使用して行内に列を配置する方法を変更することもできます。

これにより、新しい列構造を選択できるパネルが開きます。レイアウトはすぐに更新され、FlexBoxは間隔とアライメントを自動的に調整します。

いくつかの異なる行タイプを追加して、画面を変更してみてください。あなたはすべてが壊れずにどのように変化し、適応するかを見るでしょう。これが、BuilderにFlexBoxを焼いた強さであり、Divi 5をより信頼性の高い最新のオプションにします。

Divi 5でのFlexBoxの動作方法

開始している場合は、Divi 5でFlexBoxを使用するときに自信を持っていると感じるのに役立つ簡単なウォークスルーをご覧ください。

レイアウトコントロール

セクション、行、または列をフレックスレイアウトに切り替えると、デザイン>レイアウト設定に新しいレイアウトコントロールのセットが表示されます。これらは、通常のオプションと一緒に視覚的なフレックスボックスコントロールを提供します。

• （1）レイアウトスタイル：これは、Flexをアクティブにする場所です。設定すると、方向、アライメント、間隔などの他のフレックス固有のオプションが表示されます。
• （2）水平ギャップ：アイテム間のスペースを左から右に追加します。
• （3）垂直ギャップ：列レイアウトを使用するときに、積み重ねられた要素間のスペースを設定します。
• （4）レイアウト方向：フロー、行、列、または反転した方向を変更するため、アイテムは並べて並んで並べることができます。
• （5）コンテンツを正当化する：メイン軸に沿ってアイテムを調整します。それらを中央に配置したり、片側に押したり、広げたりすることができます。
• （6）アイテムの並べ：クロス軸に沿ってアイテムを調整します。これは、水平列内で垂直にアイテムを配置するときに役立ちます。
• （7）レイアウトラッピング：これにより、スペースがなくなるとアイテムが次の行に移動できます。壊れるのではなく、画面サイズに応答するレイアウトを構築する際に役立ちます。

ロゴのあるブランドバーがあり、それらを大きくしたいとしましょう。フレックス方向が列に設定され、レイアウトラッピングがオンになっていると、スペースがないと自動的に2列に流れます。

メディアクエリや手動の回避策がなければ、2つの行に要素を調整することが簡単になりました。

列コントロールとサイジング

フレックス対応の行の内側にある場合、各列には、列クラスと呼ばれる設計>サイジングの下に新しい設定があります。これにより、コンテンツと環境に基づいて列がどれだけのスペースを占めるかが決まります。

Shrinkをフィット（コンテンツのように広いだけにするだけ）をフィットするか（列を塗りつぶします）（列を伸ばして余分なスペースを占有する）を選択できます。

たとえば、テキスト列をより顕著に感じ、コンテンツを抱きしめるカード要素を持っている場合、カードを収縮するように設定し、テキストを充填するようになります。

コントロールを注文します

もう1つの強力ですが、しばしば見過ごされがちなツールは、 [コンテンツ]タブの下の注文設定です。これにより、ワイヤーフレームまたはレイヤービューのレイアウト構造を変更せずに、列やモジュールを視覚的に並べ替えることができます。

特定のモジュールをモバイルに最初に表示するが、デスクトップで2番目に表示されるとします。各ブレークポイントで異なる注文値を割り当てることができます。

FlexBoxの実際の使用ケース

Divi 5で簡素化されたいくつかのFlexBoxユースケースを見てみましょう。

1. flexと垂直に整列します

長い間、垂直方向のアライメントは、Webデザインの最も迷惑なレイアウトの問題の1つでした。デスクトップではうまく見えるが、小さな画面で壊れたものになってしまうだけでなく、トリック、絶対的なポジショニング、マニュアルマージンなどを試してみます。

Divi 5では、その頭痛はなくなりました。これで、セクション内にコンテンツを垂直に集中させたい場合は、アラインアイテムを中央に設定するだけです。

それでおしまい。レイアウトはブレークポイント全体で自動的に調整され、コンテンツは常にスイートスポットにとどまります。以前はCSS体操をしていたのは、現在、ビルダー内のクリックを数回クリックしています。

2。カードの高さを自動的に均等にします

あなたはおそらく以前にこの問題に遭遇したでしょう。宣伝文句などのカードの列を作成し、1つのアイテムが他のアイテムよりも多くのテキストがあるまで、すべてがうまく見えます。突然、あなたのレイアウトは不均一に感じます。背が高く伸びる列の中には、短いままである列の中には、バランスが崩れます。

その手動のクリーンアップはもう必要ありません。行またはセクションをFlexに切り替えると、Diviは各列をFlexアイテムとして扱うデフォルト設定を適用します。これにより、内部のコンテンツに関係なく、同じ行内の互いの高さに合わせて自動的に伸びます。

また、応答性の高いままです。小さな画面では、列が追加の調整を必要とせずに新しい行に包み、等しい高さの動作が引き続き適用されます。

3.ブレークポイント全体にボタンを自動的にラップします

さまざまな画面サイズでボタンの列をきれいにして読みやすくすることは、痛みになります。通常、新しい行を追加するか、各ブレークポイントのレイアウトを手動で調整することになります。しかし、Divi 5では、それはもはや必要ありません。

フレックスレイアウトをオンにし、ラップトップビューでレイアウトをラッピングできるようにします。それでおしまい。ボタンは、レイアウトを破ることなく、小さな画面で複数の行に自動的にラップします。

ボタンは、より大きな画面に間隔とアラインメントを保持し、タブレットや電話で自然にスタックします。 Justify-Contentを使用してアラインメントを微調整し、Gapを使用してそれらの間の間隔を制御することもできます。

Divi + FlexBoxは理にかなっています

FlexBoxの仕組み、Divi 5が視覚的にする方法、および一般的なレイアウトの頭痛が数時間ではなく数秒かかる方法をご覧いただけます。 Divi 5はFlexBoxをサポートするだけでなく、その周りに構築されています。すべてのセクション、行、列は、カスタムCSSなしで予想されるように振る舞う準備ができています。

Divi 5で設計する場合、FlexBoxは単なるオプションではありません。それはよりスマートなデフォルトです。クリーナーレイアウト、回避策が少なく、レスポンシブコントロールがビルダーに焼き付けられました。それが変化であり、それはあなたをウェブデザインの将来に備えるものです。