基本のプロパティを覚える2

• display:felx;
• display:grid;

前回の「基本のプロパティを覚える1」に続きで、今回はCSSのコーディングでよく使われるレイアウトに関するプロパティ、flexとgridについて詳しく説明していきます。

flexとgridは、displayプロパティの一種で、レイアウトを調整するための重要なCSSです。
CSSのコーディングの基本となる重要なプロパティなので、しっかり学んでいきましょう。

display:felx;

CSSでフレックスボックスレイアウトを使用するためのプロパティです。
フレックスボックスは、要素を水平（行方向）または垂直（列方向）に整列させるのに適しています。

基本的な使い方

display: flex; を親要素に指定すると、その子要素はフレックスアイテムとして扱われます。
これにより、フレックスコンテナ（親要素）内のアイテムの配置やサイズを柔軟に設定できます。

See the Pen
1735_基本のプロパティを覚える2_001（display: flex; ） by Yugo Harima (@yh-dezadezi)
on CodePen.

補足：親要素と子要素の入れ子関係

親要素：	他の要素を含む要素のこと
子要素：	親要素の中に含まれている要素のこと

上記の図では、<div class="box"> が親要素で、<div class="item"> がその中にある子要素です。
入れ子関係とは、このように要素が他の要素の中に含まれている構造のことを言います。

justify-content

子要素の主軸（デフォルトでは水平軸）に沿った整列方法を指定します。
flex-start、flex-end、center、space-between、space-aroundなどがあります。

See the Pen
1735_基本のプロパティを覚える2_002（justify-content） by Yugo Harima (@yh-dezadezi)
on CodePen.

align-items

子要素の交差軸（デフォルトでは垂直軸）に沿った整列方法を指定します。
flex-start、flex-end、center、baseline、stretchなどがあります。

See the Pen
1735_基本のプロパティを覚える2_003（align-items） by Yugo Harima (@yh-dezadezi)
on CodePen.

flex-direction

子要素の配置方向を指定します。
row（横並び）、column（縦並び）、row-reverse、column-reverseが使用できます。

See the Pen
1735_基本のプロパティを覚える2_003（flex-direction） by Yugo Harima (@yh-dezadezi)
on CodePen.

flex-wrap

子要素がフレックスコンテナ（親要素）の幅を超えた場合に折り返すかどうかを指定します。
nowrap（折り返さない）、wrap（折り返す）、wrap-reverse（逆順で折り返す）があります。

See the Pen
1735_基本のプロパティを覚える2_005（flex-wrap） by Yugo Harima (@yh-dezadezi)
on CodePen.

display:grid;

CSSでグリッドレイアウトを使用するためのプロパティです。
グリッドレイアウトは要素を水平（行方向）と垂直（列方向）の両方で整列させたり、配置したりすることができるレイアウトの仕組みです。これにより、複雑なレイアウトを簡単に管理できます。

基本的な使い方

display: grid; を親要素に指定すると、その子要素はグリッドアイテムとして扱われます。
これにより、グリッドコンテナ（親要素）内のアイテムを行と列に配置できます。

See the Pen
1735_基本のプロパティを覚える2_006（display:grid;） by Yugo Harima (@yh-dezadezi)
on CodePen.

grid-template-columns と grid-template-rows

グリッドコンテナ（親要素）内の列と行のサイズを指定します。
fr（フラクションユニット）px（ピクセル）などを使用して比率や幅を指定することができます。

See the Pen
1735_基本のプロパティを覚える2_007（grid-template-columns と grid-template-rows） by Yugo Harima (@yh-dezadezi)
on CodePen.

gap

グリッドアイテム間の隙間を指定します。

See the Pen
1735_基本のプロパティを覚える2_008（gap） by Yugo Harima (@yh-dezadezi)
on CodePen.

以上が、「基本のプロパティを覚える2」についての説明でした。
これまでに学んだプロパティ以外にも、CSSには多くのプロパティが存在します。
知識を増やすことで、より幅広いCSSのコーディングが可能になるので、引き続き学んでいきましょう。

次のステップで、「classとは」について説明していきます。