Divi 5のFlexboxレイアウトシステムに切り替えるときに避けるべき5つの落とし穴

Divi 5は、すべての新しいFlexBoxベースのレイアウトシステムを出荷しました。 Divi 4の古いブロックレイアウトエンジンに取って代わり、Visual Builderの強力な新しいコントロールのロックを解除します。すべての新しい行がデフォルトでフレックスレイアウトになりました。既にCSS FlexBoxを使用していない限り、Flexは異なる方法で機能するため、この変更には新しいデザインの考え方が必要です。習慣を調整しないと、立ち往生します。

この更新により、ラッピング、方向、間隔、順序付け、アラインメントの視覚的なコントロールが得られます。すべてが組み込まれています。また、事前に構成された行ショートカットが付属しており、ディスプレイ設定を最小限に微調整して複雑な行構造を構築します。 Flexがこれらすべてのユースケースをカバーするようになったため、専門セクションや全幅のセクションなど、一部のブロックベースの機能は非推奨です。

この投稿は、Divi 5のブロックからFlexにメンタルモデルを切り替えるときにヒットする5つの最大の落とし穴になります。

落とし穴＃1：ブロックの考え方にFlexを強制します

→Flexには、新しいコントロールだけでなく、新しいメンタルモデルが必要です。

彼らが非常に現実的な制限に達していることを知らない限り、誰も変化を好む人はいません。多くの人にとって、古いレイアウトシステムは彼らが知っていて快適なものです。しかし、それにはその制限がありました。 CSSについて十分に知っている人は、古いシステムにFlexBoxが治療を設計したものが欠けていることを知っていました。最初の落とし穴を避けるには、FlexBoxが追加のオプションを備えた単なるブロックレイアウトではないことを理解する必要があります。

Divi 4では、モジュールはデフォルトで垂直に積み重ねられました。すべての要素はその前の要素の下に座っていました。列で水平に積み重ねることもできますが、その時点では、セクション内の複数の行 +列を使用してレイアウトを作成します。それは多くの人にとって予測可能で快適でしたが、それはまた、2つのボタンを並べて2つのボタンと他のデザインの課題を持たせることができないというイライラする現実にもつながりました。

Divi 5は、新しいコンテナ（つまり、セクション、行、列、およびグループ）がデフォルトで「フレックス」に設定されているため、現在は異なって機能します。子要素を配置するためのコンテナレベルで、より具体的なオプションが得られます。 FlexBoxは、使用可能なスペースとその中のコンテンツに基づいて要素が配置される柔軟なレイアウトを可能にするため、強力です。それについては次の落とし穴で。これにより、レイアウトは、固定または絶対的なポジショニングに依存することなく、さまざまな画面サイズとコンテンツに適応できます。 Flexとブロックを比較する1つの例は次のとおりです。

ブロックレイアウトスタックモジュールは、ブロック軸に沿って垂直にスタックします。 FlexBoxを使用すると、メイン軸として行と列を選択できます。

UIの各設定とオプションは、各コンテナに追加された実際のCSSプロパティに直接対応します。

落とし穴＃2：Flex Shrink＆Growが子供の要素のサイジングにどのように適合するかわからない

→縮小して成長することなく、レイアウトは期待どおりに動作しません。

Divi 5にFlexを使用すると、子モジュールの幅または高さを設定できます。さらに、コンテナ内の部屋に応じて、収縮または埋めることができます（幅または高さ）。この例では、テキストモジュールは45％の幅に設定されています。つまり、2つのモジュールが同じ行にあるかのように水平に適合することを意味します。しかし、奇数のテキストモジュールを追加すると、空のスペースがあることを望んでいません。これらのモジュールをFlex成長に設定することができます。その後、利用可能なスペースが並んでいると、これらのモジュールが充填されます。

Diviは、「充填する」、「収縮するためにシュリンク」、任意のフレックスコンテナ内の子要素のカスタム設定などのコントロールを公開します（子要素>デザイン>サイジング>充填、収縮、またはカスタム）。

子要素の高さと幅の設定は、レイアウトをブロックするために慣れている場合は馴染みがあります。しかし、FlexBoxを使用すると、設定を成長させ、縮小することで、固定サイジングと応答性のある動作を組み合わせることで、各コンテナ内の利用可能なスペースに適応します。複雑さを加えますが、はるかに柔軟性のロックを解除します。

縮小してフィットして成長して（Flex-basisに加えて）充填に成長することも、レスポンシブレイアウトの作成を支援するのに非常に便利です。ブロックレイアウトが頻繁にレスポンシブになるには、それらの各ブレークポイントで複数のブレークポイントと幅/高さを設定する必要があります。 FlexBoxは、さまざまなブレークポイントでの一意の設定の恩恵を受けることができますが、名前が示すように、非常に柔軟です。これは、タイポグラフィにclamp（）を使用する場合に特に当てはまります。それらの両方を一緒に使用して、他の相対的なCSSユニットとともに、ブレークポイントに対する絶え間ないニーズを破ります。

FlexBoxで構築された別の例を見てみましょう。

列コンテナ（親）は、これらの設定で曲がるように設定されています。

• 水平および垂直ギャップ：30px（これにより、計算またはクランプを使用して少し良くすることができます）
• レイアウト方向：行の逆（落とし穴＃4でのこの決定の説明）
• コンテンツを正当化：センター
• アイテムのアライメント：センター
• フレックスラップ：ラップリバース（落とし穴＃4でのこの決定の説明）

次に、列内に3つの子要素を配置しました。見出しモジュール、分割モジュール、およびテキストモジュール。それぞれの関連する設定は次のとおりです。

• 見出しモジュール
  • テキストサイズ：クランプ（2REM、1.5REM + 2VW、3REM）
  • 幅：自動
  • フレックスサイズ：収まるように収縮します
• 仕切りモジュール
  • 幅：自動
  • フレックスサイズ：収縮してフィットして成長して満たす
• テキストモジュール
  • テキストサイズ：クランプ（0.9375rem、0.75rem + 0.4vw、1rem）
  • 幅：自動
  • フレックスサイズ：収まるように収縮します

列の屈曲方向で、子供の要素が部屋があるときはいつでも水平に並んでいます。テキストモジュールは最も広いため、独自の行を埋めます。その後、分割モジュールは自動幅があり、フレックスグロウとフレックスシュリンクの両方が有効になっているため、成長または縮小します。ヘッダーモジュールは、本質的な幅のみを使用し、コンパクトなままです。このセットアップにより、ブレークポイントなしで完全に応答性の高いレイアウトが得られます。

落とし穴＃3：マージンの習慣を破らないでください

→代わりにギャップを使用します - それはよりスマートでクリーンで、フレックス用に作られています。

DIVI 4では、モジュールと他の要素間の視覚的なギャップにはマージンが必要でした（下縁を介した垂直ギャップ、左/右マージンを介した水平ギャップ）。ギャップが列間隔に適用されると、Divi 4には溝設定がありましたが、標準のCSS値はかかりませんでした。実際には、列の側面にマージンを使用してギャップを作成しました。これは、ブロックレイアウトが機能するのと同じ方法です。しかし、今ではよりクリーンでより効果的なアプローチがあります。

Divi 5のFlexboxシステムは、設計>レイアウト>水平および垂直ギャップの下で行と垂直ギャップコントロールを導入します。これらのマップCSSギャップとロウギャップ。垂直ギャップは、アイテムが新しいラインに包むときに各「フレックス行」に自動的に適用されます。同じことが水平ギャップにも当てはまります。隣に子供の要素があるときはいつでも、ギャップが存在します。これらのギャップ設定は、正のCSSユニットも受け入れているため、Clamp（）またはcalc（）を使用して応答性のギャップ間隔を作成できます。

これにより、すべての子供要素にマージン値を適用する必要性が減ります。ギャップ設定は、フレックス方向とコンテナ内の子供の数に基づいて自動的に適応して、ギャップを自動的に適用します。マージンにはまだその場所がありますが、容器内の間隔要素の必要性は減少しています。

落とし穴＃4：リバースフローと順序制御の障害

→視覚順序とセマンティックオーダーは一致する必要はありません。

デフォルトでは、フレックスコンテナ内の子要素がソースの順序で表示されます。 FlexBoxとDivi 5は、要素のHTML順序を変更せずに、逆フレックス方向と注文制御を指定する機能を提供します。

レイアウト方向の下で逆方向に切り替えると、行または列方向のいずれかの要素の順序を逆転させることができます。 Pluall＃2のレイアウトの例をもう一度見るには、なぜこれが必要なのかがわかります。レイヤーのビューでは、子要素の順序が見出し、次に仕切り、最後にテキストモジュールであることがわかります。意味的には、スタックの上部に見出し（この場合はH2）を持つことは、スクリーンリーダーにとって理にかなっています。ただし、テキストサイズの視覚階層を使用しているため、最初であろうと最後であろうと、見出しは視覚的に十分に明らかです。

Row ReverseをFlex DirectionとLap Reverseとして使用すると、HTMLの順序付け（アクセシビリティにとって重要）が保持されると同時に、それらの想定方法を設計することができます。

子要素の設定> [コンテンツタブ]> [注文]をクリックすると、DIVIにある子要素の順序を使用して同じものを実現できます。この要素のみが表示される順序を変更できます。この例では、同じ最終結果を達成しますが、別の設定があります。

落とし穴＃5：ラップを設定するのを忘れる

→Flexは、あなたがそれを伝えない限り、新しい行に壊れません。

以前にラッピングについて言及しましたが、独自のセクションに値します。新しいフレックスコンテナは、デフォルトでラップがありません。これは予期せぬ結果をもたらす可能性があります。たとえば、それぞれ50％の幅の4つの子モジュールを追加すると、2つのフレックス行に表示されると予想されます。あなたの問題は、単にあなたがあなたのコンテナを包むことを許可する必要があるということです。

DIVIには、レイアウトラッピングと呼ばれるトグルが含まれています。これには、ノーラップ、ラップ、ラップリバースの3つの状態があります。モジュールがしきい値で新しい行に壊れる場合は、ラップを有効にする必要があります。これが、DIVIが単一の容器内のマルチローチ構造をサポートする方法です（ネストまたは複数の行がこれを行う唯一の方法ではありません）。

FlexBoxをマスターするために時間をかけてください

Divi 5のFlexは、DIVIの以前のブロックのみのレイアウトシステムよりも強力です。ただし、理解するにはある程度の学習が必要です。 FlexBoxはDIVI固有の設定ではないため、このCSSツールの仕組みの基本を知ることが重要です。 DIVIは、CSSで適用できるすべての設定がエディターで直接利用できるため、簡単に実装できます。しかし、概念はブロックとは大きく異なります。

これらの違いのため、FlexBoxを理解するためにインタラクティブな教育ツールを使用して1時間を費やすことを強くお勧めします。使いやすく、実際に行うのはFlexBoxFroggy.comです。 24の徐々に複雑な課題が必要になり、すべての基本を教えてくれます。それは、1時間の間、デモクロッククロールよりもはるかに優れています。

Divi 5でFlexを使用してください

Divi 5のFlexboxは正直です。それはあなたが望むものを推測しません。それはあなたに決めるように頼みます。しかし、一度決定すると、柔軟性が続きます。すべてのレイアウト構造を、カスタムCSSやハッキングなしでは、責任を持ち、応答性があり、確実に、さらには無限にネストされていることを確実に構築できます。