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

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

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

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

  • コーディングについて勉強中の方
  • flexboxを使いこなせるようになりたい方

flexboxの基本的な使い方

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

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

Image from Gyazo

さらに、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

Image from Gyazo

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

※0.5倍で見てください

align-items

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

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

  • center
  • flex-start
  • flex-end
  • stretch
  • baseline

Image from Gyazo

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

※0.5倍で見てください

flex-wrap

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

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

  • nowrape
  • wrap
  • wrap-reverse

Image from Gyazo

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

※0.5倍で見てください

flex-direction

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

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

  • row
  • row-reverse
  • column
  • column-reverese

Image from Gyazo

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

※0.25倍で見てください

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA