【動画解説付き】flexbox関連のプロパティを学ぼう

コーディング学習の際に誰もが躓くのがのが「要素のセンタリング」と「横並べ」だと思います。今回は要素の横並べをする際に使用されるflexboxについての解説をしていきます。

使いこなせると非常に便利で、思い通りのレイアウトが実現できるようになるので、何ができるのかをしっかりと抑えておきましょう。

この記事を読んで欲しい方

flexboxの基本的な使い方

まずは「基本のき」を抑えましょう。

flexboxは「横並びにしたい要素の"親要素"に対して display: flex; を指定する」だけで、要素同士を横並びにすることができます。

さらに、display: flex; を指定した要素に対して、指定できるプロパティがいろいろあります。そういったflexbox関連のプロパティを使用することによって、思い通りのレイアウトをシンプルなコードで実現することができます。

それでは、flexbox関連のCSSプロパティを見ていきましょう。

以下の動画で、flexbox関連のプロパティを解説しています。ざっと概要が知りたい方は以下の動画を御覧ください！

それでは、初学者の方に覚えてほしい順にプロパティを解説していきます。

※親要素をflexコンテナ、子要素をflexアイテムとして解説します。

justify-contentはflexアイテムの水平方向の揃えを調整するプロパティです。

justify-contentが取れる値は以下のものです。初期値はflex-startです。

ヘッダーのように要素を端と端に寄せるとき、複数の要素を等間隔に並べるときに、justify-content: space-between; を使用します。

※0.5倍で見てください

justify-contentはflexアイテムの水平方向の揃えを調整するプロパティです。

align-itemsが取れる値は以下のものです。初期値はstretchです。

以下のように画像とテキストの高さを中央で合わせるときなどに、align-items: center; を使用します。

※0.5倍で見てください

flex-wrapはflexアイテムの折返しを指定するプロパティです。

flex-wrapが取れる値は以下のものです。初期値はnowrapです。

以下のように、複数行になっているカードリストに対して、flex-wrap:wrap; を使用します。

※0.5倍で見てください

flex-directionはflexアイテムの並び順を指定するプロパティです。

flex-directionが取れる値は以下のものです。初期値はrowです。

以下のような互い違いに横並べにするレイアウトに対して、flex-direction: row-reverse; を使用します。

※0.25倍で見てください