FlexBox CSSプロパティの初心者向けガイド

優れたレイアウトは、アライメントと間隔の明確なモデルから始まります。 FlexBoxは、方向、アライメント、ラッピング、およびギャップを予測可能な制御を伴う単一軸に沿ってコンテンツを整理することにより、そのモデルを提供します。

この投稿では、これらのCSSプロパティの基本と、それらがどのように連携するかについて説明します。ファンダメンタルズの後、FlexBoxレイアウトシステムを使用して、Divi 5で同じアプローチが視覚的にどのように実装されているかを示します。それに到達しましょう！

CSS Flexboxとは何ですか？

モバイルトラフィックオーバーテイクデスクトップはWebデザインを変更しました。開発者は、携帯電話、タブレット、デスクトップで動作するレイアウトが必要でした。古い方法はしばしば失敗しました。

FlexBoxはこれを修正しました。 CSS FlexBoxは要素を適応させます。ディスプレイを追加：容器に屈すると、その直接の子供は柔軟になります。彼らは、スペースに基づいて成長、縮小、または固定を維持することができます。

FlexBoxは、左から右の行、または上から下の列のいずれかを直線にまっすぐにします。方向を選択します。

コンテナはレイアウトを制御します。均等に広がる、中央、または積み重ねられたなど、アイテムがどのように調整され、スペースが出る方法を設定します。ギャッププロパティは、余分なマージンやパディングのないアイテム間に一貫したスペースを追加します。古いテクニックには、トリッキーなマージン数学が必要であり、頻繁に壊れました。

従来の方法により、ランダムな間隔の選択があります：ここでは10px、そこには20px、どこかで40pxです。これらの散乱値は矛盾を引き起こし、どの間隔が適用されるかを知ることを困難にします。ギャッププロパティすべての要素に対して1つの一貫したルールを使用して、当てはまりを削除します。

FlexBoxとそのプロパティのクイックガイド

FlexBoxは2つのキャンプに分割されます：コンテナ用のプロパティとアイテムのプロパティ。コンテナプロパティはグループ全体に影響を及ぼしますが、アイテムプロパティを使用すると、個々の要素を調整できます。ほとんどのレイアウトには、次のようなこれらのプロパティのほんの一握りが必要です。

ディスプレイ：フレックス

ディスプレイ：フレックスを追加して、任意の要素をフレックスコンテナに変えます。その直接の子供たちはフレックスアイテムになります。アイテムは、標準ブロック要素のようにスタックする代わりに、デフォルトで連続して並んでいます。フレックスアイテムは通常の要素とは異なるルールに従うため、間隔の頭痛が消えます。コンテナは現在、その子供（またはアイテム）がどのように振る舞うかを制御し、通常のCSSの驚きではなく予測可能な結果を​​得ることができます。

フレックス方向

どの方向アイテムが流れるかを選択します。左から右への配置には行を使用します。

アイテムを垂直に積み重ねる列。

いずれかに逆に追加すると、アイテムは注文を完全に裏返します。

この選択は、他のプロパティの仕組みに影響を与える中心軸を設定します。

行から列に切り替えると、justify-contentとalign-Itemがどのように動作するかを変更するため、計画では方向が最初に登場します。

正当なコンテンツ

このプロパティは、中央軸に沿って残りのスペースを分配します。アイテムは必要なものを取り、このプロパティは残りを処理します。 Flex-Startを使用して、最初はすべてをバンチ、中央に中央にクラスター化し、Flex-Endをクラスター化してすべてを最後に向けます。同時に、スペースベトベトベットは、等しいギャップでアイテムを広めるために使用されます。スペースアラウンド値は、各アイテムに両側の等しいスペースを与え、スペースはどこでも同じギャップを作成します。

Align-Items

クロス軸のアライメントを処理します。水平レイアウトの場合、これは垂直アライメントを意味します。垂直レイアウトの場合、水平方向のポジショニングを制御します。フレックススタート、センター、フレックスエンド、ストレッチ、ベースラインなどの値をサポートします（スペース*値ではありません）。それを中央に設定すると、アイテムは高さに関係なく真ん中に並んでいます。デフォルト値はストレッチです。アイテムは、コンテナのクロスサイズを埋めるための伸びます。コンテナのクロスサイズが自動している場合、多くの場合、最も高いアイテムに等しいため、アイテムは高さが等しく見えるようになります。

フレックスラップ

アイテムが部屋を使い果たしたときに何が起こるかを決定します。デフォルトのNowrapは、アイテムを縮小することにより、すべてを1行に保持します。ラップに切り替え、適合しないアイテムは、好みのサイズを維持しながら、新しいラインにドロップします。包装方向も逆転することができます。ラッピングは、シングルラインを複数の行に変え、グリッドに似たレイアウトを作成します。

ギャップ

マージンをいじることなくアイテム間のスペースを追加します。ギャップを設定：20px、すべてのアイテムは一貫した間隔を取得します。必要に応じて、異なる水平ギャップと垂直ギャップを設定できます。スペースはアイテム間でのみ表示され、端の周りではありません。これにより、レイアウトを後で変更すると破損するマージンの計算が打ち勝ちます。

これらのプロパティは、それらのハングを得るとうまく機能します。トリッキーな部分は、それぞれが何をしているかを思い出し、そのすべてのCSSを入力することです。コードを書き、ブラウザを更新し、それが完全に正しくないことを確認してから、戻って調整します。 Diviのようなビジュアルビルダーは、プロパティ名を入力する代わりにボタンをクリックできるようにすることで、これを裏返します。

Divi 5はFlexBox Visualを作成します

確立したように、FlexBoxの学習は一つのことです。 Justify-Content：Space-Bet-Betweenが何をするかを思い出すことは別です。設計よりも多くの時間をプロパティの入力に費やします。 CSSを書く代わりに、Diviビルダーで各オプションが何をするかを正確に示すボタンとスライダーを使用します。 Divi 5はこれをFlexBoxに持ち込み、抽象的な概念を簡単なクリック可能なコントロールに変えます。

より深く潜る前に、Diviとは何かを簡単に見てみましょう。

Diviとは何ですか？

Diviは、手間をかけずに見栄えの良いサイトを望む人々のためにWordPressを機能させるウェブサイトビルダーです。

ページの周りに200以上のモジュールをドラッグして、その場所にテキストを変更できます。あなたが実際のサイトで作業している間、色を選んで即座に表示されるのを見てください。後であなたに嘘をつくかもしれないプレビューではありません。

テーマには、レストラン、写真家、コンサルタント、その他のビジネス向けの2000以上のレイアウトが含まれているため、好きなものを見つけて、ニーズに合わせて完全に機能するまで調整できます。

テーマビルダーは、サイトのすべての部分を制御できます。他の人のように見えるのではなく、目立つヘッダーをデザインし、人々が読みたいブログページを構築し、404ページを訪問者が去るのではなく周りに固執するほど興味深いものにすることさえできます。

Divi AIは、迅速に構築するのに役立ちます

かつて、テーマとテンプレートを作成すると、コピー、画像、デザインのアイデアについてさまざまなアプリをジャグリングすることができました。 Divi aiは、必要なものをすべて1つの統一されたインターフェースに収集します。ウェブサイトを構築する場所です。

テキストが必要であることを伝えてください。

カスタム画像を尋ねると、それらが作成されます。写真の編集を説明したり、変更を加えるのを見ることもできます。

さらに、尋ねるとコードを処理し、新しいセクションを構築します。

Diviのクイックサイトは、どこから始めればよいかわからずに空白のページを見つめるのを防ぎます。私たちのチームが設計したスターターサイトから選ぶことができます。元の画像やアートワークは見栄えがよくなります。

また、ビジネスをdivi divi Quickサイトに説明し、AIを使用してゼロから何かを構築することもできます。これらのAIが構築したサイトには、説明に合った実際の見出し、コピー、および画像が付属しています。

AIですべてを生成したり、画像を撮影したり、プレースホルダーをドロップして画像をドロップしたりします。最初にフォントと色を設定してから、AIにブランドの選択を回避しながら、その後すべてを編集可能にします。

Divi 5：将来のウェブサイトビルダー

Divi 5は、フレームワーク全体をゼロから再構築します。

Visual Builderはよりスムーズに実行され、ページがより速くレンダリングされ、コードベースは最新のWeb標準をより効果的にサポートできます。よりクリーンなマークアップ、より良いパフォーマンス、そして現在と将来の準備ができている基盤を獲得します。

インターフェイスも合理化されます。設定はより論理的に整理されているように見え、毎日のタスクにはクリックが少なくなります。単純なページや複雑なレイアウトを構築しても、全体的なエクスペリエンスはより反応が良いと感じています。

あなたは、あなたが知っている同じ視覚的な建物のアプローチを取得し、その下にはるかに強力な基盤があります。

Divi 5の新しいもの

新しいアーキテクチャは、以前は不可能な機能のドアを開きます。これらの18以上の追加により、Webサイトの構築と管理方法が変更されます。

これがあなたが得るものの例です：

• フレックスボックスレイアウトシステム：アライメント、間隔、および位置決めのための視覚的なコントロール。要素は、自動的に新しいラインに成長、縮小、またはラップすることができます。コードなしで複雑なレイアウトのために、ネストされた行とモジュールグループで動作します。
• ネストされた列：無限のネストで他の行内に列を置きます。コードの回避策なしに複雑なレイアウト構造を構築します。
• 17 WooCommerceモジュール：製品ギャラリーを含む完全な製品ページビルダー、カート、レビュー、評価、在庫通知、パン粉、製品メタ、アップセルなどを追加します。カートとチェックアウトモジュールはまもなく登場します。
• インタラクションシステム：ポップアップを作成、トグル、アニメーションのスクロール、マウスモーブメント効果、およびビューポートトリガーを作成します。スクロール後にフェードインするプロモーションバナーのような複雑な動作のために複数のトリガーを混ぜます。
• Responsive Editor：ビューモードをより速く、より正確で、散らかっていない編集をすることなく、任意の設定を同時に設定するために、レスポンシブホバーと粘着性状態を表示、編集、リセットできます。>
• ループビルダー：データベースから引き出す動的コンテンツを構築します。カスタムポストレイアウト、製品グリッド、および繰り返しセクションを作成します。 WooCommerce製品で動作します。
• オプショングループプリセット：タイポグラフィ、境界、影、背景の再利用可能なスタイルを作成します。単一のモジュールだけでなく、互換性のある要素にこれらを適用します。
• デザイン変数：色、フォント、間隔、数字、画像、テキストのグローバル値を設定します。プライマリカラーを一度変更すると、どこでも自動的に更新されます。
• Advanced CSSユニット：Clamp（）、calc（）、min（）、およびmax（）機能を視覚コントロールを介して使用します。応答性のあるタイポグラフィと間隔の計算にコードは必要ありません。
• 相対色とHSL：数学的に美しい色システムを作成します。ベースカラーが変更されたときにハーモニーを自動的に維持する色のバリエーションを構築します。

そしてもっと来ています！開発チームは、パブリックベータリリースの準備をしているため、2週間ごとに機能を追加し続けています。

Divi 5のFlexboxセットアップの簡単な概要

Divi 5の視覚的アプローチは、FlexBoxの実装から当て推量を削除します。プロパティ名を暗記してCSSを入力する代わりに、各コントロールが何をするかを正確に示すボタンとスライダーを取得します。それがどれほど簡単かを見てください。

1.最初のフレックス行を設定します

拡張されたテンプレート選択から行の構造を選択することから始めます。 DIVI 5には、等しい列、マルチローググリッド、マルチカラムセットアップなど、さらに多くのレイアウトオプションが提供されます。

Divi 5の新しいセクションは、FlexBoxから自動的に始まります。新鮮な列を追加すると、フレックスプロパティがオンになっている準備が整います。ただし、古いDIVIバージョンの既存のセクションを使用している場合は、デフォルトのブロックレイアウトから手動で切り替えて、行の設定アイコンをクリックし、[デザイン]タブ>レイアウトに移動し、「ブロック」を「Flex」に変更する必要があります。

2。方向、流れ、アライメントの理解

レイアウト方向フィールドは、アイテムがどこになるかを決定します。行はデフォルト設定であり、アイテムが水平に並んでいます。

列に切り替え、アイテムは通常のWebレイアウトのように垂直に要素を積み重ねます。

どちらのオプションにも、注文を完全に裏返すリバースバージョンが付属しています。

一方、Justifyコンテンツは、メイン軸に沿って残りのスペースで何が起こるかを決定します。行の場合、開始は左に、中央の中心を水平に意味し、終了は正しく整列します。

列の場合、開始はトップを意味し、中央の中心はすべてを意味し、終了はアイテムを下部に押します。

標準の開始、中央、および終了アライメントを超えて、ナビゲーションメニューやカードレイアウトに最適な、等しいギャップで広がりアイテム間のスペースがあります。

周りのスペースは、各アイテムに両側の等しい呼吸室を与えます。これは、一貫したマージンが必要なときに役立ちます。また、スペースはどこでも同じギャップを均等に作成し、バランスの取れた視覚間隔に最適です。

アイテムのアライメントは、フロー方向に垂直に動作します。行レイアウトを選択すると、これはアイテムの垂直方向の位置を制御します。

列レイアウトを選択した場合、水平アライメントを処理します。

中央はすべてを中央に配置し、スタートアイテムを最初の端に配置し、端がそれらを遠い端に押し込み、ストレッチによりアイテムが利用可能なスペースを埋めます。

これらのコントロールは、カスタムCSS計算なしに一般的なレイアウトの頭痛を解決します。

3。ギャップコントロールを使用した間隔を出します

ギャップコントロールは、コンテナ内のフレックスアイテムの間にスペースを追加します：列、モジュール、およびコンテンツタイプの作業。ギャップは、乱雑なパディングやマージン数学のない呼吸室を作成します。ギャップはアイテム間でのみ表示され、外側の端の周りではありません。

水平ギャップを20pxに設定すると、すべての列がその正確な間隔があります。

垂直ギャップを20pxに変更すると、すべてのギャップが即座に更新されます。

DIVI 5は、ビューポートの長さやパーセンテージなどの高度なCSSユニットをサポートしています。画面サイズの間でスケーリングするレスポンシブギャップには、clamp（）を使用できます。 Calc（2REM + 10px）などのユニットを組み合わせたCalc（）関数もサポートされています。

ここでのギャップ制御は、設計変数もサポートしています。値としてクランプ（16px、2vw、32px）を備えた「水平列ギャップ」と呼ばれる数値変数を追加します。その変数をサイト全体のギャップコントロールに適用します。

後でよりタイトな間隔が必要な場合は、変数を編集します。すべてのギャップが即座に更新されます。

4。アイテムの包装方法を制御します

レイアウトラッピングは、アイテムが水平スペースから使い果たしたときに何が起こるかを制御します。デフォルトのNOラップ設定により、アイテムを縮小してコンテナに合わせてすべてを1行に保ちます。ラップに切り替えて、自然なサイズを維持しながら、フィットしないアイテムが新しいラインにドロップします。

ラップリバースは通常のラップと同じことを行いますが、方向を反転します。以下の代わりに、以前の行の上に新しい行が表示されます。

これにより、アイテムがオーバーフローするときに視覚階層を制御できます。ラッピング動作は、さまざまな画面サイズにわたって一貫しているため、レイアウトは壊れることなくデスクトップからモバイルに予想通り適応します。

Divi 5では、ラッピングアライメントコントロールも提供します。この機能は、フレックスラッピングと複数行のフォームを有効にすると、自動的に表示されます。方向が列に設定されている場合、垂直アライメントにラッピングアライメントを使用できます。

同様に、列方向の場合、オプションは水平方向のアライメント用です。

ストレッチにより、すべてのラインが拡張され、使用可能な垂直スペースが埋められます。最初はラインの束を開始し、中央のクラスターを中央に押し込み、反対側の端に向かって押して終了します。

広がりの間のスペースは、等しい隙間が並んでいるラインの間のスペース、両側の各ラインが等しい呼吸室を与え、スペースはすべてのライン間で同じギャップを均等に作成します。

これは、カードレイアウト、画像ギャラリー、または複数の行に自然に流れる必要があるコンテンツに最適です。アイテムは、利用可能な幅に基づいて再配置しながら、プロポーションと間隔を維持します。アイテムが小さな画面で押しつぶされることなく、きれいな休憩を取得します。

5。さまざまな画面サイズにわたって作業します

Divi 5の7つのブレークポイントは、レイアウトの適応方法を粒状に制御できます。

各ブレークポイントは独立して機能するため、デスクトップの行レイアウトが触れられないまま、レイアウト方向をモバイルの列に切り替えることができます。すべてを携帯電話に集中させるかもしれませんが、より大きな画面でのアラインメントの間にそのスペースを保持します。

デスクトップ3列のセットアップは、中央のブレークポイントに影響を与えることなく、モバイルの単一列スタックになる可能性があります。各画面サイズは、その視聴体験に最適なものを正確に取得します。

新しいレスポンシブエディターは、このプロセスをよりスムーズにします。すべての画面サイズの値を一度に表示および変更するには、任意の設定の横にある応答性エディターアイコンをクリックします。

ただし、clamp（）値を使用して行と列をギャップしている場合、手動の変更を必要とせずにブレークポイント間で自動的にスケーリングします。

6.オプショングループプリセットの作成

FlexBoxレイアウトが必要に応じて動作すると、オプショングループプリセットオプションをクリックして適切にラベル付けすることにより、オプショングループプリセットとしてそれらの設定を保存できます。

ギャップの値、アライメントの選択、およびラップ設定がバンドルされます。 [保存]をクリックすると、その正確なレイアウト構成がサイト全体で再利用可能になります。保存したプリセットを使用する場合は、新しい行のプリセットアイコンをクリックして、保存したプリセットを選択します。

プリセットは、高度なユニットをそのままにします。レスポンシブな間隔は、設定したすべての数学とともに転送され、変更は異なるブレークポイントでも行われました。

今日はDivi 5のFlexBoxを始めましょう

FlexBoxは、レイアウトを変更すると壊れるマージンとパディング数学を排除します。メディアクエリとカスタムセクションでレスポンシブデザインをいじるのをやめます。

DIVI 5は、これらの抽象的なCSSプロパティを視覚的コントロールに変えます。ボタンをクリックして方向を設定し、スライダーをドラッグしてギャップを調整し、ラップをオンとオフに切り替えることができます。レスポンシブエディターは、1つのパネルから7つのブレークポイントすべてを処理するため、コードを推測する代わりに、即座に結果が表示されます。

成功した組み合わせをプリセットとして保存し、どこでも再利用します。 CSS構文をデバッグする代わりに、デザインに時間を費やします。