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

2024.06.18

最初に覚えておきたい！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-flowはflex-directionとflex-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-grow、flex-shrink、flex-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が優先されます。