CSSFlexboxとCSSグリッドの違い

開発者として私たちがしなければならないことの1つは、新しいプロジェクトを与えられたときに問題に取り組む方法を理解することです。レスポンシブウェブサイトを使用する場合、ウェブサイトのレイアウトにCSSグリッドとCSSフレックスボックスのどちらかを選択することがよくあります。この記事では、GridとFlexboxの違いと、どちらを選択するのが最適なのかを見極めることを試みます。

Flexbox –簡単な概要

CSS Flexboxは、基本的にレスポンシブボックスモデルです。コンテナ内での配置を改善し、その機能を認識している限り、実装はかなり簡単です。

フレキシブルボックスモデルは、引き続きボックスモデルのすべてのプロパティを使用して、マージン、パディング、境界線、およびコンテンツを制御します。 display: flexを設定すると 親コンテナでは、その親の子で使用されるすべてのフレックスプロパティが開きます。

Flexboxプロパティの選択：

• フレックス方向 ：列| 行 * |列-逆|行反転
• フレックスラップ ：ラップ| nowrap * |ラップリバース
• フレックスフロー ：リストされている最初の2つのプロパティのショートカット–フォーマットflex-flow: <flex-direction> <flex-wrap>に従います;
• justify-content： 主軸に沿ってアイテムの間隔を空けます。 flex-directionがrowに設定されている場合、主軸は水平軸です。列に設定すると、主なアクセスは垂直軸になります。
  • justify-content： flex-start * |フレックスエンド|センター|スペース均等|スペースアラウンド|スペース-間
• align-items： メインアクセスの反対側の軸に沿ってアイテムを配置します。 flex-directionがcolumnに設定されている場合、それが垂直軸になります。行に設定すると、それが横軸になります。
  • align-items：ストレッチ * | center | flex-start | flex-end | baseline
• align-self： これは、親が表示プロパティを「フレックス」として宣言しているフレックスアイテムで使用できます。フレックスコンテナの配置を制御します。
  • align-self： auto * |ストレッチ|センター|フレックススタート|フレックスエンド|ベースライン

* –プロパティのデフォルト設定

CSSグリッド–簡単な概要

CSSグリッドは、使用できるもう1つのレイアウトモデルです。 CSS Flexboxモデルよりも少し新しいため、ブラウザのサポートは、Flexboxの場合ほどCSSグリッドで広く利用できません。細心の注意を払って配置された列と行に2Dレイアウトを作成する機能があります。 display: gridを設定すると 親要素では、使用可能な共通のグリッドプロパティを使用できます。

CSSグリッドプロパティの選択

• grid-gap、grid-column-gap、grid-row-gap： これは基本的に間隔を設定するために使用されます。グリッドギャップは、列と行の両方のギャップを制御するためのショートカットです。
• grid-template-columns、grid-template-rows： これにより、グリッド内のコンテナの基本的なフォーマットが可能になります。列の幅、行の高さ、各行のコンテナの数などです。
• justify-content ：グリッド全体を水平に配置します。
• align-content ：グリッド全体を垂直に配置します。
• grid-column、grid-row： グリッドアイテムの幅または高さを宣言できます。

どちらを選びますか？

CSS Flexboxのプロパティにより、1次元レイアウトのデザインが可能になります。行または列を使用してレイアウトを作成するように設定できます。これは、コンテンツの配置ではなく、レスポンシブデザインの柔軟性に重点を置いているWebページに最適です。

対照的に、CSSグリッドでは、行と列の2次元空間にレイアウトを作成できます。グリッド内の各コンテナのレイアウトと幅および高さを制御するプロパティがあります。したがって、このブログの上部に投稿されているステンドグラスの窓に非常によく似たグリッドになってしまう可能性があります。

コンテンツの配置に重点を置いており、空間内の子コンテナを制御したい場合は、グリッドが最適なレイアウト形式です。 Flexboxは、配置よりもコンテンツの流れに重点を置いています。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

グリッドのブラウザサポートは、フレックスボックスの場合ほど普及していません。単に、フレックスボックスがグリッドよりも少し古いと思うからです。これは、プロジェクトで使用するレイアウトモデルを選択する際の考慮事項になる場合があります。

結論

どちらのレイアウトモデルを選択しても、どちらも問題を解決するための有効なオプションです。 CSSFlexレイアウトとCSSグリッドレイアウトのどちらを選択するかを実際に決定するのは、プロジェクトの目的の問題です。