CSS

2021.07.07

最初に覚えておきたい!CSS Flexboxの基礎

CSSでレイアウトを作成する時、よく名前が上げられるFlexbox。
プロパティの数も多く、慣れるまでは難しく感じるかもしれませんが、細かい部分をきちんと合わせてくれたり、後々レイアウトを調整したくなった時に調整がしやすいとても便利なプロパティです!
今回はそんなFlexboxの基本的な使い方とプロパティについてご紹介します!

flex boxとは?

そもそもFlexboxとは何か?というと、正式名称は「Flexible Box Layout Module」と言う、CSS3から導入されたfloatの代わりに使えるようなレイアウト手法のことです。
floatのように横並びに配置するレイアウトを組む時に主に利用されています。

以前まではサポートされていないブラウザも多く、ベンダープレフィックスを付ける必要がありましたが、現在はIE11に対応する場合以外はそのまま書いても問題なくなりました。

Flexboxの基本的な使い方

Flexboxは親要素(コンテナ)と子要素(アイテム)の2つの要素によって構成されています。

<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
.container{
	display:flex;
}

横並びにしたい子要素を囲む親要素display:flexをかけることで横並びのレイアウトにすることができます。
横並びにするだけならこれで完了ですが、親要素、子要素にそれぞれプロパティを書いていくことでより細かい調整を行うことができます。

親要素のプロパティ

親要素に指定できるプロパティには並び方を指定できるものとアイテムの位置を指定できるものがあります。
それぞれの使い方をご紹介していきたいと思います!

並び順を指定するflex-direction

See the Pen by spiqa design (@spiqa_design) on CodePen.

まず紹介するのは子要素の並び順を指定するflex-directionです。

  • row(初期値)…水平方向に左から右へと配置
  • row-reverse…水平方向に右から左へと配置
  • column…垂直方向に上から下へと配置
  • column-reverse…垂直方向に下から上へと配置

flex-directionを応用することで、HTMLを入れ替えることなく左右のコンテンツを入れ替えることができるため、レスポンシブでレイアウトを変えたい場合などにとても便利です。

See the Pen flex-row応用 by spiqa design (@spiqa_design) on CodePen.

折り返しを指定するflex-wrap

Flexboxは何も指定をしないと折り返さない横並びの表示となります。
そのため、子要素を折り返しさせたい場合はflex-wrapを指定します。

  • nowrap(初期値)…折り返さないで表示
  • wrap…コンテンツ幅いっぱいになったら上から下へ折り返して表示
  • wrap-reverse…コンテンツ幅いっぱいになったら下から上へ折り返して表示

See the Pen flex-wrap by spiqa design (@spiqa_design) on CodePen.

並び順と折り返しを一括指定するflex-flow

flex-flowflex-directionflex-wrapを一括で指定することができるプロパティです。
flex-direction→(間に半角スペース)→flex-wrapの順番で指定します。
Flexboxは見た目を整えるためにプロパティを多く指定することがあるため、ショートハンドを使うことですっきりとしたCSSを書くことができます!

.container {
	flex-flow: row wrap;
}

水平方向の位置を指定するjustify-content

justify-contentを指定することで、子要素の水平方向の位置を指定することができます。
初期値では左揃えになっていますが、中央揃え、均等配置など様々な指定をすることができます。

  • flex-start(初期値)…左揃えで表示
  • flex-end…右揃えで表示
  • center…中央揃えで表示
  • space-between…両端の子要素に余白を空けずに均等配置
  • space-around…すべての子要素で均等に間を空けて均等配置

See the Pen by spiqa design (@spiqa_design) on CodePen.

垂直方向の位置を指定するalign-items

align-itemsを指定することで、子要素の垂直方向の位置を指定することができます。
justify-contentと組み合わせることで上下左右中央揃えにすることもできます。

  • stretch(初期値)…上下の余白を埋める様に表示
  • flex-start…上揃えで表示
  • flex-end…下揃えで表示
  • center…中央揃えで表示
  • baseline…ベースラインに合わせて表示

See the Pen by spiqa design (@spiqa_design) on CodePen.

行の垂直方向の位置を指定するalign-content

align-contentを指定することで、子要素が複数行ある場合の垂直方向の位置を指定することができます。
使用するには親要素の高さを決め、flex-wrapで折り返しを指定しておく必要があります。

  • stretch(初期値)…行の余白を埋める様に表示
  • flex-start…上揃えで表示
  • flex-end…下揃えで表示
  • center…中央揃えで表示
  • space-between…最初と最後の行の子要素に余白を空けずに均等配置
  • space-around…すべての行の子要素で均等に間を空けて均等配置

See the Pen by spiqa design (@spiqa_design) on CodePen.

子要素のプロパティ

ここまでにご紹介した親要素以外にFlexboxを使用する子要素に対しても個別の設定をすることができます。

並び順を指定するorder

一つ一つに指定を書くことによってHTMLの記述した順番に関わらず、要素の並び順を指定することができます。

See the Pen order by spiqa design (@spiqa_design) on CodePen.

伸び率を指定するflex-grow

flex-growを指定することで、それぞれに伸び率を指定することができます。
初期値は0になっており、マイナス値の指定はできません。

See the Pen flex-grow by spiqa design (@spiqa_design) on CodePen.

縮み率を指定するflex-shrink

先ほどご紹介したflex-growとは逆に縮み率を指定することができます。
こちらも先ほど同様に初期値は0です。

See the Pen flex-shrink by spiqa design (@spiqa_design) on CodePen.

ベースの幅を指定するflex-basis

flex-basisを指定することで、子要素それぞれの基本幅を指定することができます。
初期値はautoになっており、%で指定をします。

See the Pen by spiqa design (@spiqa_design) on CodePen.

伸び率、縮み率、ベースの幅を一括指定するflex

flexは親要素のflex-flowのようにflex-growflex-shrinkflex-basisを一括で指定することができます。
flex-grow→(間に半角スペース)→flex-shrink→(間に半角スペース)→flex-basisの順番で指定します。

.item01 {
    flex: 1 1 10%;
}
.item02 {
    flex: 0 0 30%;
}

垂直方向の位置を指定するalign-self

align-selfはコンテナに余白がある時に子要素の中身の垂直方向の位置を指定することができます。
Flexboxではvertical-alignが使えないため、align-selfで指定をします。
親要素のalign-itemsでも垂直方向の指定はできますが、両方書いた場合はalign-selfが優先されます。

  • auto(初期値)…親要素のalign-itemの値を使用
  • flex-start…上揃えで表示
  • flex-end…下揃えで表示
  • center…中央揃えで表示
  • baselne…ベースラインに合わせて表示
  • stretch…上下の余白を埋めるように表示

See the Pen by spiqa design (@spiqa_design) on CodePen.

使用する時の注意点

ほとんどのブラウザに対応はしていますが、IE11ではベンダープレフィックスが必要だったり、バグが起こってしまうこともあります。
バグの対処法は他の記事で詳しくご紹介いたします!

まとめ

最初に覚えることがたくさんあるため、一見ハードルが高く感じるかもしれませんが、レイアウトを作成する上でとても便利なプロパティです!
一気に全てを覚えるのではなく、折り返しや位置の指定などすぐに使うプロパティから覚えていくと、どんどん使えるようになっていくと思います!

また、ゲーム感覚でFlexboxの練習ができるサイトもあるため、ぜひ遊びながら気軽にFlexboxに触れてみてください!
FLEXBOX FROGGY

関連記事はこちら

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.08.03

    【コピペOK】パンくずリストの設置方法(便利なプラグインも紹介)

    CSS

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

おすすめ記事

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    JavaScript

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!