コーディング学習の際に誰もが躓くのがのが「要素のセンタリング」と「横並べ」だと思います。今回は要素の横並べをする際に使用されるflexboxについての解説をしていきます。
使いこなせると非常に便利で、思い通りのレイアウトが実現できるようになるので、何ができるのかをしっかりと抑えておきましょう。
この記事を読んで欲しい方
- コーディングについて勉強中の方
- flexboxを使いこなせるようになりたい方
flexboxの基本的な使い方
まずは「基本のき」を抑えましょう。
flexboxは「横並びにしたい要素の"親要素"に対して display: flex; を指定する」だけで、要素同士を横並びにすることができます。
さらに、display: flex; を指定した要素に対して、指定できるプロパティがいろいろあります。そういったflexbox関連のプロパティを使用することによって、思い通りのレイアウトをシンプルなコードで実現することができます。
それでは、flexbox関連のCSSプロパティを見ていきましょう。
flexboxのプロパティ
以下の動画で、flexbox関連のプロパティを解説しています。ざっと概要が知りたい方は以下の動画を御覧ください！
それでは、初学者の方に覚えてほしい順にプロパティを解説していきます。
※親要素をflexコンテナ、子要素をflexアイテムとして解説します。
justify-content
justify-contentはflexアイテムの水平方向の揃えを調整するプロパティです。
justify-contentが取れる値は以下のものです。初期値はflex-startです。
- space-between
- space-around
- center
- flex-start
- flex-end
ヘッダーのように要素を端と端に寄せるとき、複数の要素を等間隔に並べるときに、justify-content: space-between; を使用します。
align-items
justify-contentはflexアイテムの水平方向の揃えを調整するプロパティです。
align-itemsが取れる値は以下のものです。初期値はstretchです。
- center
- flex-start
- flex-end
- stretch
- baseline
以下のように画像とテキストの高さを中央で合わせるときなどに、align-items: center; を使用します。
flex-wrap
flex-wrapはflexアイテムの折返しを指定するプロパティです。
flex-wrapが取れる値は以下のものです。初期値はnowrapです。
- nowrape
- wrap
- wrap-reverse
以下のように、複数行になっているカードリストに対して、flex-wrap:wrap; を使用します。
flex-direction
flex-directionはflexアイテムの並び順を指定するプロパティです。
flex-directionが取れる値は以下のものです。初期値はrowです。
- row
- row-reverse
- column
- column-reverese
以下のような互い違いに横並べにするレイアウトに対して、flex-direction: row-reverse; を使用します。
