🍯 ☃️ 🧘🏾 知っておくべき5つのFlexboxテクニック 🤵 🧥 👳🏿

Flexboxは、ユーザーインターフェイス設計用に最適化されたCSS標準です。 Flexboxのさまざまなプロパティを使用して、小さなブロックからページを構築し、必要に応じて簡単に移動およびサイズ変更できます。レスポンシブWebサイトおよびアプリケーションは、現在のWeb業界で高い需要があります。

この記事では、レイアウトのレイアウトの問題を解決するための5つのflexboxメソッドを紹介します。また、これらの方法が適用されるデモンストレーションの実用的な例を示します。

1.同じ高さの列を作成する

最初は、これは難しい作業のように思えないかもしれませんが、同じ高さの柱を作ることは、時には非常に「hem」になります。この場合のmin-heightは実用的ではありません。ブロック内のコンテンツの量が増えると、その長さも増えるからです。

Flexboxはこれを問題とは見なしません。必要なのは、柔軟なモデルを初期化することだけです。 flex-directionとalign-itemsが「デフォルト」に設定されていることを確認してください。

<div class="container"> <div></div> <div></div> <div></div> </div>

 .container{ display: flex; flex-direction: row; /*     */ align-items: stretch; /*       */ }

例

2.再注文

少し前に、いくつかの要素を動的に並べ替える必要がある場合は、おそらくCSSハックをいくつか試してみましたが、このベンチャーをあきらめ、フラストレーションの中でjavascriptを使用しました。フレックスボックスを使用すると、このタスクは1つのCSSプロパティを適用することになります。

このプロパティはorderと呼ばれます。これにより、任意の数のflex要素を変更し、それらが画面に表示される順序を変更できます。このパラメーターは、要素の位置を決定する整数です。数字が小さいほど優先順位が高くなります。

 <div class="container"> <div class="blue">...</div> <div class="red">...</div> <div class="green">...</div> </div>

 .conteiner{ display: flex; } /*  */ .blue{ order: 3; } .red{ order: 2; } .green{ order: 1; }

3.水平および垂直のセンタリング

CSSの垂直方向のセンタリングは、私たちに自問させる問題の1つです。そして、これは実際にそうです。 Googleの垂直方向のCSSを見ると、検索によってさまざまなメソッドが無数に表示され、そのほとんどにテーブルと変換が含まれています。レイアウトの製造を目的としています。

Flexboxは、この問題に対するよりシンプルなソリューションを提供します。各柔軟なレイアウトには、軸上の2つの方向（X、Y）と、位置合わせのための2つの個別のプロパティがあります。親コンテナの中央に任意の要素を配置できます。

 <div class="container"> <div>...</div> </div>

 .container{ display: flex; /*   */ justify-content: center; /*   */ align-items: center; }

例

4.完全にレスポンシブなグリッドを作成する（レスポンシブグリッド）

ほとんどの開発者は、レスポンシブサイトを作成するために既製のCSSフレームワークに依存しています。ブートストラップは最も人気がありますが、これを支援する他の何百ものフレームワークがあります。それらは通常うまく機能し、多くのオプションがありますが、かなり重い傾向があります。自分の手ですべてを実行したいが、かさばるフレームワークフレームが必要ない場合は、Flexboxが最適です！

フレックスボックスグリッド文字列は、display：block;。を含む単純なコンテナです。水平列内には任意の数の要素を含めることができ、そのサイズはFlexを使用して設定されます。柔軟なモデルはブラウザウィンドウのサイズに適応するため、このスキームはすべてのデバイスで適切に表示されるはずです。それでも、まだ十分な水平画面スペースがない場合は、メディアクエリを使用してこの問題を解決できます。

 <div class="container"> <!--    25%   --> <div class="col-1">...</div> <!--    50%   --> <div class="col-2">...</div> <!--    25%   --> <div class="col-1">...</div> </div>

 .container{ display: flex; } .col-1{ flex: 1; } .col-2{ flex: 2; } @media (max-width: 800px){ .container{ flex-direction: column; } }

5.完全なスティッキーフッターの作成

Flexboxには、この問題に対する簡単な解決策があります。アプリケーション表示：フレックス; bodyタグを使用すると、Flexプロパティに基づいてページレイアウト全体を構築できます。なぜ私はすべてを言っているのですか、はい、私は言っていますか？実際によく見てみましょう。

 <body> <div class="main">...</div> <!--    --> <footer>...</footer> </body>

 html{ height: 100%; } body{ display: flex; flex-direction: column; height: 100%; } .main{ /*        */ flex: 1 0 auto; } footer{ /*      ,        */ flex: 0 0 auto; }

おわりに

IE 9を除くすべてのブラウザがFlexboxモードをサポートするようになりました。この時点までにFlexboxを使用したことがない場合は、試してみることをお勧めします。

CSSのヒントがお役に立てば幸いであり、より良い、よりレスポンシブなレイアウトの作成に役立つことを願っています。

これに関するコメントを待っています。

知っておくべき5つのFlexboxテクニック