Flexboxを使用してCSSのみのスマートレイアウトを構築する方法

公開: 2022-03-11

フレキシブルボックス、または略してFlexboxは、新しい優れたレイアウトシステムを提供するために2009年に導入されたCSSのプロパティのセットです。 Flexboxモジュールは、CSSの3番目のバージョン（CSS3）の一部として識別されます。

box-shadow 、 border-radius 、背景グラデーションなど、CSS3の新しいプロパティの多くをすでに使用している可能性があります。ただし、Flexboxは、それに値する広範な採用をまだ見ていません。これは、何年にもわたって受けたすべての重大な変更、Internet Explorer 10で部分的にしかサポートされていないため、またはFlexboxがエコシステム全体であり、以前のパラダイムは主に単一のすぐに使用できるものに基づいていたためである可能性があります。プロパティに移動します。

これは非常に強力で、以前は夢にしか見られなかったレイアウトを実現するための幅広いオプションを提供します。

この記事では、Flexboxの基本と、Flexboxを使用して、複雑なCSSハックやJavaScriptを必要とする非常にクールなレイアウトを実現する方法について説明します。

Flexboxを使用する理由

デフォルトでは、HTMLブロックレベルの要素はスタックするため、それらを1行に並べる場合は、 floatなどのCSSプロパティに依存するか、テーブル風またはインラインブロック設定でdisplayプロパティを操作する必要があります。

float （左または右）を使用する場合は、ある時点でラッパーをクリアして、最後のfloat要素までプッシュする必要があります。そうしないと、その後に続くものにオーバーフローします。ただし、floatを使用すると、要素を水平方向に整理することに制限されます。

または、さらに、 displayプロパティを操作して、目的のレイアウトを実現することもできます。しかし、これは退屈なことは言うまでもなく、せいぜいぎこちなく感じることが多く、ブラウザ間で必ずしも一貫してレンダリングされるとは限らないかなり壊れやすいレイアウトになることがよくあります。このアプローチは、さまざまなサイズの複数のデバイスをターゲットにしている場合は特に効果的ではありません。これは、今日ではほとんどの場合に当てはまります。

Flexboxを入力してください！

親要素に適用される単純なルールを使用すると、そのすべての子のレイアウト動作を簡単に制御できます。

Flexboxを使用すると、次のことができます。

Flexbox親内の要素の順序を逆にします。
子要素を列でラップします（列の数は子と親の高さによって異なります）。
ビューポートのサイズが変更されている間に要素が拡大または縮小する速度を指定します。
指定された幅の単位タイプ（相対または絶対）に関係なく、要素が縮小可能かどうかを制御します。
CSSを使用して要素の順序を変更します（これをメディアクエリと組み合わせると、フローに無限の可能性が見つかります）。
要素の複雑な分布を生成して、周囲のスペースまたはちょうどその間のスペースと等距離にします。
流れが異なる「反逆」要素を生成します（左に1つ、右に1つ、上/下…それはあなたの呼び出しです）。
そして、最も重要なのは、明確な修正のハックを永久に回避することです！

Flexboxは最初は難しいかもしれないことを理解しています。相互依存関係のある5つよりも、無関係な10のCSSプロパティを学習する方が簡単だと思います。ただし、現在のCSSスキルと、この記事の助けを借りれば、新しいCSSユニバースを始めることができます。

Flexboxの基本

画面

displayはCSSの最も基本的なプロパティの1つであり、Flexラッパーを定義するために使用されるため、Flexboxのコンテキストでは非常に重要です。

フレックスラッパーの値には、 flexとinline-flex 2つがあります。

2つの違いは、 display: flexラッパーがブロック要素のように機能するのに対し、 display: inline-flexラッパーはinline-blockのように機能することです。また、子を収容するのに十分なスペースがない場合、 inline-flex要素が大きくなります。しかし、これらの違いを除けば、2つの動作は同じです。

以下のサンプルコードを試して、インラインフレックスがアクティブなときにビューポートの幅を減らして…スクロールしてください。

CodePenのDD（@Diegue）によるPen Flexbox @ Toptal --Parent--`display`プロパティを参照してください。

 .wrapper { display: flex || inline-flex; }

フレックス方向

最初のサンプルを見たので、デフォルトの動作は単に要素の行を作成することであると推測できます。しかし、もっとあります：

行（デフォルト）：要素を左から右に配置します（ただし、RTLが設定されている場合は逆になります）。
row-reverse：行配置の要素の順序を逆にします
列：要素を上から下に配置します
column-reverse：列配置の要素の順序を逆にします

ヒント： columnとcolumn-reverse値を使用して軸を入れ替えることができるため、横軸に影響を与えるプロパティは、代わりに縦軸に影響を与えます。

CodePenのDD（@Diegue）によるPen Flexbox @Toptal --Parent--`flex-direction`プロパティを参照してください。

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

フレックスラップ

最初のコードサンプルを確認すると、子要素がデフォルトでフレックスラッパー内にスタックされていないことがわかります。ここでflex-wrapが役立ちます。

nowrap （デフォルト）：フレックスコンテナ内のアイテムが折り返されないようにします
wrap：必要に応じてアイテムを複数の行（またはflex-directionによっては列）にラップします
wrap-reverse： wrapと同じですが、アイテムがラップされると、行（または列）の数が反対方向に増加します。

CodePenのDD（@Diegue）によるPen Flexbox @Toptal --Parent--`flex-wrap`プロパティを参照してください。

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

フレックスフロー

flex-directionプロパティとflex-wrapプロパティを1つのプロパティflex-flowに組み合わせることができます。

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

コンテンツを正当化する

このプロパティは、子要素の水平方向の配置を制御するために使用されます。

flex-start （デフォルト）：要素は左揃えになります（ text-align: left ）
flex-end：要素は右に揃えられます（ text-align: rightを使用したインライン要素と同様）
center：要素は中央に配置されます（ text-align: centerを使用したインライン要素と同様）
スペースアラウンド（魔法が始まる場所）：すべての要素は、各アイテムの周りに同じ量のスペースでレンダリングされます。 2つの連続する子要素間のスペースは、最も外側の要素とラッパーの側面の間のスペースの2倍になることに注意してください。
space-between： space-aroundと同じですが、要素が同じ距離で分離され、ラッパーの両端の近くにスペースがない点が異なります。

注： flex-directionをcolumnまたはcolumn-reverseに設定すると、軸が入れ替わることに注意してください。これらのいずれかが設定されている場合、 justify-contentは水平方向ではなく垂直方向の配置に影響します。

CodePenのDD（@Diegue）によるPen Flexbox @Toptal --Parent--`justify-content`プロパティを参照してください。

アイテムを揃える

このプロパティはjustify-contentに似ていますが、その効果のコンテキストはラッパー自体ではなく行です。

flex-start：要素はラッパーの上部に垂直に配置されます。
flex-end：要素はラッパーの下部に垂直に配置されます。
center：要素はラッパー内で垂直方向に中央に配置されます（最後に、これを実現するための安全な方法です）。
ストレッチ（デフォルト）：要素がラッパーの全高（行に適用される場合）および全幅（列に適用される場合）を占めるように強制します。
ベースライン：要素を実際のベースラインに垂直に配置します。

CodePenのDD（@Diegue）によるPen Flexbox @Toptal --Parent--`align-items`プロパティを参照してください。

コンテンツを揃える

このプロパティはjustify-contentおよびalign-itemsに似ていますが、垂直軸で機能し、コンテキストはラッパー全体です（前の例のような行ではありません）。その効果を確認するには、複数の行が必要です。

flex-start：行は上に垂直に配置されます（つまり、ラッパーの上から積み重ねられます）。
flex-end：行は下部に垂直に配置されます（つまり、ラッパーの下部から積み重ねられます）。
center：行はラッパーの垂直方向の中央に配置されます。
ストレッチ（デフォルト）：通常、このプロパティは要素をストレッチして、ラッパーの垂直方向の高さ全体を利用します。ただし、要素の特定の高さを設定した場合、その高さが優先され、残りの垂直方向のスペース（その行のその要素の下）は空になります。
space-around：すべての行は、それ自体の周囲に同じ量のスペースを垂直に（つまり、それ自体の下と上に）レンダリングされます。したがって、2つの行の間のスペースは、上下の行とラッパーのエッジの間のスペースの2倍になることに注意してください。
space-between： space-aroundと同じですが、要素が同じ距離で分離され、ラッパーの上端と下端にスペースがない点が異なります。

CodePenのDD（@Diegue）によるPen Flexbox @Toptal --Parent--`align-content`プロパティを参照してください。

フレックスグロー

このプロパティは、要素が使用する必要がある使用可能なスペースの相対的な比率を設定します。値は整数である必要があります。0がデフォルトです。

同じフレックスラッパーに2つの異なる要素があるとします。両方のflex-grow値が1の場合、使用可能なスペースを共有するために等しく成長します。ただし、次の例に示すように、一方がフレックスflex-grow値1で、もう一方がflex-grow値が2のこの値は、最初の値の2倍のスペースを占めるようにflex-growします。

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; }

CodePenのDD（@Diegue）によるPen Flexbox @Toptal --Children--`flex-grow`プロパティを参照してください。

フレックスシュリンク

flex-growと同様に、このプロパティは、要素が整数値で「縮小可能」であるかどうかを設定します。 flex-growと同様に、 flex-shrinkはフレックスアイテムの収縮率を指定します。

CodePenのDD（@Diegue）によるPen Flexbox @Toptal --Children--`flex-shrink`プロパティを参照してください。

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

フレックスベーシス

このプロパティは、使用可能なスペースが分散され、それに応じて要素が調整される前の要素の初期サイズを定義するために使用されます。

ヒント： flex-basisはすべてのブラウザでcalc()とbox-sizing: border-boxをサポートしていないため、これらのいずれかを使用する必要がある場合はwidthを使用することをお勧めします（ flex-basis: auto;も設定する必要があることに注意してください） flex-basis: auto; ）。

CodePenのDD（@Diegue）によるPen Flexbox @Toptal --Children--`flex-basis`プロパティを参照してください。

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

フレックス

flex-grow 、 flex-shrink 、およびflex-basisプロパティを1つのプロパティに組み合わせることができます： flexは次のようになります。

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

ヒント： flexを使用する場合は、すべての値を定義してください（デフォルト値を使用する場合でも）。一部のブラウザーはそれらを認識しない可能性があります（一般的なバグは、 flex-grow値を定義していないことに関連しています）。

自己調整

このプロパティはalign-itemsに似ていますが、効果は各要素に個別に適用されます。可能な値は次のとおりです。

flex-start：要素をラッパーの上部に垂直に配置します。
flex-end：要素をラッパーの下部に垂直に配置します。
center：要素をラッパー内で垂直方向に中央揃えにします（これを実現する簡単な方法です！）。
ストレッチ（デフォルト）：要素をストレッチして、ラッパーの全高（行に適用される場合）またはラッパーの全幅（列に適用される場合）を占有します。
ベースライン：実際のベースラインに従って要素を位置合わせします。

CodePenのDD（@Diegue）によるPen Flexbox @Toptal --Children--`align-self`プロパティを参照してください。

注文

Flexboxに含まれている最も優れた機能の1つは、DOMを変更したりJavaScriptを使用したりすることなく、（ orderプロパティを使用して）要素を並べ替えることができることです。 orderプロパティの動作は非常に簡単です。 z-indexがアイテムがレンダリングされるorderを制御するのとほぼ同じ方法で、orderは要素がラッパー内に配置される順序を制御します。つまり、低orderの値を持つ要素（ちなみに負の値になることもあります）は、 orderの値を持つ要素の前に配置されます。

CodePenのDD（@Diegue）によるPen Flexbox @Toptal --Children--`order`プロパティを参照してください。

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

すべてをまとめる：Flexboxの使用例

レイアウトの設計に関しては、Flexboxは可能性の世界を解き放ちます。以下に、Flexboxプロパティの使用例をいくつか示します。

垂直方向の配置コンポーネント

Flexboxを使用すると、一度に複数の要素を含め、あらゆるものを垂直方向に揃えることができます。 Flexboxがない場合は、複数の要素を含む1つの子を作成する必要があるポジショニングまたはテーブル風の手法を使用する必要がありました。しかし、Flexboxを使用すると、これらの面倒で壊れやすい手法を残して、コンテナー内のコンテンツが変更される回数や変更の種類に関係なく、ラッパーでいくつかのプロパティを定義するだけで済みます。

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ }

Pen Flexbox @Toptalを参照してください-私たちが提供できる実際の使用法-CodePenでのDD（@Diegue）による垂直方向の配置。

ハーフ/ハーフレイアウト

「half/half」レイアウトは、コンテンツが垂直方向の中央に配置された2列のフルハイトレイアウトです。これは通常、「スクロールしなければ見えない位置」（つまり、ページの読み込み後にユーザーが下にスクロールする前）に実装されます。

より伝統的な手法を使用して、フロート要素（それぞれ幅50％）を使用してこのレイアウトを作成し、フロートをラッパーにクリアすることができます（「clearfix」 :beforeおよび:after 、 overflow: hidden 、またはclear: both;を使用した奇抜な<div> clear: both;最後に）。それでも、それは多くの作業であり、結果はFlexboxが提供するものほど安定していません。

次のコードスニペットでは、レイアウトの設定がいかに簡単であるか、またすべてが垂直方向に整列されているため、子もFlexboxラッパーになる方法を確認できます。

アウターラッパー：

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

内部ラッパー：

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ }

Pen Flexbox @Toptalを参照してください-私たちが提供できる実際の使用法-CodePenのDD（@Diegue）によるハーフブリードセクション。

全幅ナビゲーションバーボタン

全幅のナビゲーションバーは、要素の数に関係なく、ナビゲーションバーアイテムの同じ行にスペースを均等に分散します。

以下のサンプルには、この動作のない象徴的なボタンもいくつかあり、2つを任意の方法で組み合わせることができることを示しています。 Flexboxがなければ、この種のレイアウトを実現するには、使用可能なスペースを計算し、スパンするボタンとスパンしないボタンに応じてプログラムで分散するためのJavaScriptコードが必要でした。

Flexboxはこれをはるかに簡単にします。

ラッパーのプロパティ：

 .navbar { display: flex; }

子プロパティにまたがる：

 .navbar-item { flex-grow: 1; /* They will grow */ }

スパン以外の子プロパティ：

 .navbar-other { flex-grow: 0; // They won't grow }

Pen Flexbox@Toptalを参照してください-私たちが提供できる実際の使用法-CodePenのDD（@Diegue）によるフルブリードボタンナビゲーションバー。

宣伝文句

さまざまなプロジェクトで、アイコンとテキストを含む一連の情報ボックスを実装する必要があったのは何回ですか。

この要素の配布は、主にデジタルマーケティングで役立ちますが、ソフトウェア開発で他の用途にも使用できます。 Flexboxの機能を使用すると、グリッドの種類を設定したり、要素の数に関係なく要素を配置したりできます。

ラッパーのプロパティ：

 .wrapper { display: flex; flex-wrap: wrap; }

子のプロパティ：

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

タブレットおよびモバイルビューポートの場合、幅は50％から100％の間で変化します。

Pen Flexbox@Toptalを参照してください-私たちが提供できる実際の使用法-CodePenのDD（@Diegue）による宣伝文句。

クロスブラウザの互換性の強化

Flexboxの構文は、ブラウザのバージョンによって何度も変更されています。これは、Flexboxでレイアウトを実装し、古いWebブラウザー、特に古いバージョンのInternetExplorerをサポートしようとするときに問題になる可能性があります。

幸い、コードを最も幅広いWebブラウザーで機能させるための多くの手法と回避策が、優れたリソースであるFlexbugsにリストされています。そのサイトの情報に従うと、さまざまなWebブラウザー間でより良い一貫した結果が得られます。

プレフィックスタスクは、この点で特に役立ちます。 CSSルールのプレフィックスを自動化するには、次のツールのいずれかを選択できます。

ルビー：

Autoprefixer Rails
Middleman Autoprefixer

Node.js：

PostCSS Autoprefixer
Grunt Autoprefixer
Gulp Autoprefixer

スマートレイアウトの構築を開始

Flexboxは、作業をスピードアップ、洗練、スケーリングするための優れたツールです。限界は開発者の想像力にのみあります。

次のレイアウトを計画するために視覚的な補助が必要な場合は、このきちんとした遊び場を試すことができます。

CodePenのペンフレックスボックス@Toptal-DD（@Diegue）によるフレックスボックスプレイグラウンドを参照してください。

新しいウィンドウで開きます。

大多数のユーザーによる最新のWebブラウザーの採用が増えるにつれ、Flexboxを使用すると、面倒なJavaScriptコードを調べたり、厄介なCSSを作成したりすることなく、すばらしいレイアウトを簡単に作成できます。