【習得必須】CSSのflexboxでレイアウトを自由自在に操る

2021.09.15

WebサイトやWebアプリケーションなどを作成する際に必ず必要になるのが、レイアウト。

このレイアウトを作成する時に、使用するのがCSSのflexboxプロパティです。以前はfloatが主流で使われていましたが、現在はflexboxを使うことが多くなっています。

CSSのflexboxをマスターすることで、自由自在にレイアウトを組むことが可能になるとともに、スマートフォンでも見やすいように表示を変えるレスポンシブデザインを意識する際にも非常に役に立ちます。

flexboxプロパティは、現在のHTML/CSSには欠かせない要素となっていますので習得しておかなければなりません。

今回の記事では、このCSSのflexboxプロパティを使い方から応用まで解説していきます。記事後半では、サンプルも紹介していますので最後までご覧ください。

CSSのflexboxを習得して、コーディング技術をさらにレベルアップしていきましょう。

CSSのflexboxとは

CSSのflexboxは、子要素の中身の順番を入れ替えたり、横に並べるなどのレイアウトを整えるプロパティです。

レイアウトを整えたい子要素を囲むような親要素のブロックを作成し、その親要素に

CSS
親要素{display:flex;}

これで、子要素は横並びにすることができます。

display:flex;を付け加えるだけで横並びに出来るのですから、誰でも簡単に扱うことができます。

flexboxプロパティには他にもたくさんのプロパティが存在しており、様々なレイアウトを組むことができます。

詳細については記事の後半で解説します。

flexboxの書き方

ここでもう一度、flexboxの記述方法を詳しく解説します。

<div class="oya">
        <!-- colorや余白などは省略しています -->
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
        <div class="eight">8</div>
        <div class="nine">9</div>
        <div class="ten">10</div>
    </div>
flex適用前の画像

上記のHTMLで記載したブロックをflexboxプロパティを使用して横並びにしていきます。

CSSの親要素のdisplayにflexを指定するだけです。

CSS
.oya{
  display: flex;
}
flex適用後の画像

このように縦に並んでいた子要素を簡単に横並びにすることが出来ました。

しかし、横並びにして終わりということはありません。

flexboxプロパティには、横並びにするだけではなく、順番を入れ替えたり、要素の間に余白を入れることができるプロパティが存在します。

ここからが本当のflexboxプロパティの力ですので、参考にしてレベルアップしましょう。

flexboxの親要素へ指定するプロパティ

親要素にdisplay:flex;とともに指定することでレイアウトを変更できるプロパティを紹介します。

プロパティ名効果
flex-direction子要素の向かう方向を決めるプロパティ
flex-wrap画面からはみ出た子要素を折り返しさせるプロパティ
flex-flowflex-directionとflex-wrapをまとめて指定するためのプロパティ
justify-content配置する場所を指定するプロパティ
aligne-items子要素の垂直方向の位置を指定するプロパティ
aligne-content子要素が複数行になる場合の垂直方向の位置を指定するプロパティ

それぞれのプロパティで指定できる値について詳しく解説していきます。

flex-direction

flex-directionは、子要素が向かう方向を指定することができます。

左から右へ順番に向かわせたり、上から下へ向かわせることも可能です。さらに、その逆も指定することができます。

flex-directionで指定できる値と効果をみていきます。

row(初期値)通常と同じ左から右へ向かう
row-reverse通常とは逆に右から左へ向かう
column上から下へ向かう
column-reverse下から上へ向かう

それぞれ実際のコードと一緒に解説していきます。

flex-direction:row

flex-directionの初期値であり、指定しない場合はrowの状態です。

HTML
<div class="oya">
<!-- colorや配置は省略しています -->
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
        <div class="eight">8</div>
        <div class="nine">9</div>
        <div class="ten">10</div>
    </div>
CSS
.oya{
  display: flex;
  flex-direction: row;
}
flex-direction:row;を表す画像

flex-direction:row-reverse

rowとは逆の状態となります。順番を逆にしたい時に使用します。

CSS
.oya{
  display: flex;
  flex-direction: row-reverse;
}
 flex-direction:row-reverse;を表す画像

flex-direction:column

columnは、上から下方向へ順番を変えます。上から下方向ならflexを指定しなければ済むことですが、レスポンシブデザインなど画面幅で表示を切り替える際に使えわれます。

CSS
.oya{
  display: flex;
  flex-direction:column;
}
 flex-direction:column;を表す画像

flex-direction:column-reverse

columnとは逆方向に向かいます。下から上方向へ順番が並びます。

CSS
.oya{
  display: flex;
  flex-direction:column-reverse;
}
flex-direction:column-reverse;を表す画像

flex-wrap

flex-wrapプロパティは、画面幅が狭くなり、子要素が入り切らなくなった際に下に折り返すかどうかを指定するプロパティです。

レスポンシブデザインには必須のプロパティとなります。

flex-wrapで指定できる値と効果を紹介します。

nowrap(初期値)子要素を一列のままで、折り返さない
wrap画面幅に合わせて、下に折り返す
wrap-reverse画面幅に合わせて、上に折り返す

flex-wrap:wrap-reverse;の使用頻度は少ないですが、flex-wrap:wrap;はWebサイトを作る上でほぼ必須のプロパティといえます。理解して使いこなしましょう。

それぞれ、flex-wrapの値の詳細を解説します。

flex-wrap:nowrap(初期値)

nowrapは初期値であり、指定しない状態ではnowrapの値を取ります。

wrapやwrap-reverseから、初期値に戻したい時に使用します。

HTML
<div class="oya">
<!-- colorや余白などは省略しています -->
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
        <div class="eight">8</div>
        <div class="nine">9</div>
        <div class="ten">10</div>
    </div>
CSS
.oya{
  display: flex;
  flex-wrap:nowrap;
}
flex-wrap:nowrap;を表す画像

flex-wrap:wrap

画面幅に入らない子要素を下方向へ折り返します。レスポンシブデザインを意識しなければならない時に必須のプロパティとなります。

CSS
.oya{
  display: flex;
  flex-wrap:wrap;
}
 flex-wrap:wrap;を表す画像

flex-wrap:wrap-reverse

名前どおり、wrapの逆バージョンです。wrapは下へ折り返しますが、wrap-reverseは上へ子要素を並べます。

CSS
.oya{
  display: flex;
  flex-wrap:wrap-reverse;
}
flex-wrap:wrap-reverse;を表す画像

flex-flow

flex-flowは、flex-directionとflex-wrapを一括して指定できるプロパティとなっております。

例えば、flex-directionでrow-reverse、flex-wrapでwrapを指定したい場合に、

HTML
<div class="oya">
<!-- colorや余白などは省略しています -->
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
        <div class="eight">8</div>
        <div class="nine">9</div>
        <div class="ten">10</div>
    </div>
CSS
.oya{
  display: flex;
  flex-flow:row-reverse wrap;
}
flex-flow:row-reverse wrap;を表す画像

上記のように、flex-flowは、

CSS
〇〇{
  display:flex;
  flex-flow:(flex-directionの値) (flex-wrapの値);
}

このように記載し、コードを簡略化することができます。

初期値は、

CSS
flex-flow:row nowrap;

となっております。

使用頻度は多くありませんが、このようなプロパティがあることは覚えておきましょう。

justify-content

justify-contentは、子要素の横方向の配置を変更するプロパティです。

子要素を中央に配置する時に使用することが多い重要なプロパティとなります。

flex-start(初期値)子要素を左詰めで配置
flex-end子要素を右詰めで配置
center子要素を中央に配置
space-between子要素を親要素の幅に合わせて等間隔で配置
space-around親要素に合わせて、子要素の左右それぞれに同じ幅の余白を入れて並べる

特にcenter、space-between、space-aroundはよく使うので覚えておきましょう。

それぞれの挙動を紹介します。

justify-content:flex-start;(初期値)

親要素のブロック内で左側へ配置します。初期値であり、justify-contentの記載がなければflex-startが適用されます。

HTML
<div class="oya">
<!-- colorや余白などは省略しています -->
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
        <div class="eight">8</div>
        <div class="nine">9</div>
        <div class="ten">10</div>
    </div>
CSS
.oya{
  display: flex;
  justify-content:flex-start;
}
justify-content:flex-start;を表す画像

justify-content:flex-end;

flex-startとは逆に、親要素のブロック内で子要素を右側へ寄せます。ナビゲーションメニューなどの配置の際に使われることがあります。

CSS
.oya{
  display: flex;
  justify-content:flex-end;
}
justify-content:flex-end;を表す画像

justify-content:center;

名前の通り親要素のブロックの中で、子要素を中央に配置します。要素の中央寄せは頻繁に使われるので、重要なプロパティとなります。

CSS
.oya{
  display: flex;
  justify-content:center;
}
 justify-content:center;を表す画像

justify-content:space-between;

親要素のブロック幅に合わせて、子要素を等間隔に並べます。

両端の子要素は、端に寄って配置されます。

CSS
.oya{
  display: flex;
  justify-content:space-between;
}
justify-content:space-between;を表す画像

justify-content:space-around;

space-betweenと同じような挙動を取りますが、親要素の端と子要素の両端の間にもスペースが生まれます。

CSS
.oya{
  display: flex;
  justify-content:space-around;
}
justify-content:space-around;を表す画像

justify-contentはflexboxの中でも非常に使用頻度の高いプロパティになりますので、学習初期より習得しておく必要があります。

align-items

垂直方向の調整を行うプロパティです。高さがバラバラな子要素(height指定なし)の高さを調節したり、位置を合わせる役割を持ちます。

stretch(初期値)上下の余白を全て埋めて、親要素の高さに合わせます。
center子要素を親要素の上下の中央に配置します。
baseline子要素のベースラインに合わせて配置します。
flex-start子要素を親要素の上に揃えて配置します。
flex-end子要素を親要素の下に揃えて配置します。

justify-contentが親要素の幅に合わせるのに対して、align-itemsは親要素の高さに合わせて子要素を調整することを覚えておきましょう。

align-items:stretch(初期値)

親要素内の子要素の高さ(height指定なし)を揃えます。揃える高さは、親要素の高さか親要素にheight指定がなければ、子要素の一番高い要素へ合わせます。

align-itemsの記述が無い場合は、このstretchが適用されます。

HTML
<div class="oya">
        <!-- colorや余白などは省略しています -->
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
        <div class="eight">8</div>
        <div class="nine">9</div>
        <div class="ten">10</div>
    </div>
CSS
.oya{
  height: 50px;
  display: flex;
  align-items: stretch;
}
align-items: stretch;を表す画像

align-items:center

親要素に対して、子要素を上下方向の中心に配置します。子要素の高さの中心が基準となります。

CSS
.oya{
  display: flex;
  align-items: center;
}
align-items: center;を表す画像

align-items:baseline

親要素に対して、子要素のテキストなどに合わせてベースラインを揃えます。テキストであれば、下辺に合わせて揃えます。

CSS
.oya{
  display: flex;
  align-items: baseline;
}
align-items: baseline;を表す画像

align-items:flex-start

親要素に対して、子要素の上辺に合わせて揃えます。下辺の高さは揃いません。

CSS
.oya{
  display: flex;
  align-items: flex-start;
}
align-items: flex-start;を表す画像

align-items:flex-end

親要素に対して、子要素の下辺に合わせて揃えます。上辺の高さは揃いません。

CSS
.oya{
  display: flex;
  align-items: flex-end;
}
align-items: flex-end;を表す画像

align-itemsプロパティの中でもcenterは良く使われるので、覚えておきましょう。

align-content

align-contentは、親要素内の子要素がflex-wrapなどで二行になった時の行の高さを調節します。行間を開けたり、上下に寄せることができます。

align-contentの値を以下に示します。

stretch(初期値)左上に合わせて配置します。初期値です。
center行を中央に寄せます。
flex-start親要素の上辺に合わせます。
flex-end親要素の下辺に合わせます。
space-between一番上の行は上辺へ、一番下の行は下辺に寄せて配置します。その間の行間の余白を揃えます。
space-around上下の余白全てを揃えて配置します。

二行以上になる子要素のレイアウトを組む時に役立つプロパティです。単独で使うことはありませんが、flex-wrapなどと併用して使いましょう。

align-content:stretch

align-contentの初期値はstretchになります。align-contentを記述していない場合は、stretchと同様の動きを示します。

コードと実際の動きをみていきます。

HTML
<div class="oya">
        <!-- colorや余白などは省略しています -->
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
        <div class="eight">8</div>
        <div class="nine">9</div>
        <div class="ten">10</div>
    </div>
CSS
.oya{
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
align-content: stretch;を表す画像

align-contentの記載が無くても同じ配置となります。

align-content:center

子要素の行間を詰めて、上下の中心に配置します。注意が必要なのが、二行以上の時でないとalign-content:centerは効きません。

CSS
.oya{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
align-content: center;を表す画像

align-content:flex-start

親要素の左上に詰めて配置します。align-content:stretchとの違いは、行間が開くかどうかです。

CSS
.oya{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
align-content: flex-start;を表す画像

align-content:flex-end

flex-startとは逆で、左下辺に詰めて配置します。行間の余白は無くなります。

CSS
.oya{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
align-content: flex-end;を表す画像

align-content:space-between

最初の行と最終行は上下に詰めて配置します。その間の行間は均等に余白が入ります。ここではわかりやすく三行の子要素を想定します。

CSS
.oya{
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
align-content: space-between;を表す画像

align-content:space-around

align-content: space-betweenと同じような挙動ですが、最初の行と最終行の上下に余白を入れるかどうかの違いがあります。aroundは子要素の周りにという意味であると覚えておきましょう。

CSS
.oya{
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
align-content: space-between;を表す画像

ここまでは、親要素に指定してレイアウトを整えるプロパティを解説してきました。たくさんあって覚えるのは大変ですが、このようなレイアウトを組むことができることだけでも知っておきましょう。

ここからは、親要素にdisplay:flexが指定された時に子要素へ指定することができるプロパティを紹介していきます。

flexboxの子要素へ指定するプロパティ

CSSのflexboxでは子要素にもプロパティを指定できます。子要素へのプロパティは、高さや幅の調整、並びなどを変更することができます。子要素へのプロパティを習得することでレイアウトの幅が広がるので、要注目です。

flex-grow親要素の幅に合わせて、それぞれの子要素幅の伸び率を指定できます。
flex-shrink親要素の幅に合わせて、それぞれの子要素幅の縮み率を指定できます。
flex-basis親要素に対して、子要素の幅を%で指定ができます。
flex上記3つのプロパティを一括して指定することができます。
order子要素を並び替えることができます。
align-self子要素それぞれに縦方向の位置の調整をすることができます。

それぞれ使い方と記載方法を紹介します。

flex-grow

親要素の幅に合わせて、子要素の幅の伸びを整数で指定できます。flex-growの値が大きいほど幅は大きくなります。

HTML
 <div class="oya">
        <!-- colorや余白などは省略しています -->
        <div class="one">1<br>flex-grow:2</div>
        <div class="two">2<br>flex-grow:3</div>
        <div class="three">3<br>flex-grow:1</div>
        <div class="four">4<br>flex-grow:2</div>
    </div>
CSS
.oya{
  width: 30vw;
  height: 100px;
  display: flex;
}
.oya > div{
  width:10px;
  height:80px;
}
.one{
  background-color: brown;
  flex-grow: 2;
}
.two{
  background-color: chartreuse;
  flex-grow: 3;
}
.three{
  background-color: cornflowerblue;
  flex-grow: 1;
}
.four{
  background-color: darkorange;
  flex-grow: 2;
}
flex-growを表す画像

flex-shrink

親要素の幅に合わせて、子要素の幅の縮みを整数で指定できます。flex-shrinkの値が大きいほど幅は小さくなります。

CSS
.oya{
  width: 30vw;
  height: 100px;
    display: flex;
}
.oya > div{
  width:250px;
  height:80px;
}
.one{
  background-color: brown;
  flex-shrink: 2;
}
.two{
  background-color: chartreuse;
  flex-shrink: 3;
}
.three{
  background-color: cornflowerblue;
  flex-shrink: 1;
}
.four{
  background-color: darkorange;
  flex-shrink: 2;
}
flex-shrinkを表す画像

flex-basis

親要素の幅に対して、%指定で子要素の幅を調整できます。

CSS
.oya{
  width: 30vw;
  height: 100px;
  display: flex;
}
.oya > div{
  width:250px;
  height:80px;
}
.one{
  background-color: brown;
  flex-basis: 30%;
}
.two{
  background-color: chartreuse;
  flex-basis: 20%;
}
.three{
  background-color: cornflowerblue;
  flex-basis: 40%;
}
.four{
  background-color: darkorange;
  flex-basis: 20%;
}
flex-basisを表す画像

flex

flexプロパティは、flex-grow、flex-shrink、flex-basisを一括で指定します。一般的には、このflexプロパティを使用することが推奨されてます。

記述方法としては、

CSS
子要素{
    flex:flex-growの値 flex-shrinkの値 flex-basisの値
}

簡単な例文を紹介します。

CSS
.oya{
  width: 30vw;
  display: flex;
}
.oya > div{
  width:250px;
  height:80px;
}
.one{
  background-color: brown;
  flex:1 0 20%;
}
.two{
  background-color: chartreuse;
  flex:1 0 30%;
}
.three{
  background-color: cornflowerblue;
  flex:1 0 20%;
}
.four{
  background-color: darkorange;
  flex:1 0 30%;
}
flexのショートハンドを表す画像

flexプロパティは少しわかりにくいので、実際に値を操作しながら子要素の幅の広がり方を学習しましょう。

order

子要素それぞれにorderを指定することで、順番を並び替えることができます。HTMLの順番を書き換えなくても、CSSで操作可能です。

HTML
<div class="oya">
        <div class="one">1<br>order: 2;</div>
        <div class="two">2<br>order: 1;</div>
        <div class="three">3<br>order: 4;</div>
        <div class="four">4<br>order: 3;</div>
    </div>
CSS
.oya{
  width: 30vw;
  display: flex;
}
.oya > div{
  width:250px;
}
.one{
  background-color: brown;
  order: 2;
}
.two{
  background-color: chartreuse;
  order: 1;
}
.three{
  background-color: cornflowerblue;
  order: 4;
}
.four{
  background-color: darkorange;
  order: 3;
}
flexのorderを表す画像

align-self

align-itemsの値を子要素それぞれに指定することができるのがalign-self。値もalign-itemsと同じものを指定します。

stretch(初期値)上下の余白を全て埋めて、親要素の高さに合わせます。
center子要素を親要素の上下の中央に配置します。
baseline子要素のベースラインに合わせて配置します。
flex-start子要素を親要素の上に揃えて配置します。
flex-end子要素を親要素の下に揃えて配置します。

簡単な例を紹介します。

HTML
<div class="oya">
        <div class="one">1<br>stretch</div>
        <div class="two">2<br>flex-end</div>
        <div class="three">3<br>center</div>
        <div class="four">4<br>lex-start</div>
        <div class="five">5<br>baseline</div>
</div>
CSS
.oya{
  width: 30vw;
  height: 100px;
  display: flex;
}
.oya > div{
  width:250px;
  text-align: center;

}
.one{
  background-color: brown;
  align-self: stretch;
}
.two{
  background-color: chartreuse;
  align-self: flex-end;
}
.three{
  background-color: cornflowerblue;
  align-self: center;
}
.four{
  background-color: darkorange;
  align-self: flex-start;
}
.five{
  background-color: gold;
  align-self: baseline;
}
align-selfを表す画像

CSSのflexboxについて解説:まとめ

flexboxはたくさんのプロパティを指定できます。たくさんあり過ぎて覚えるのは大変ですが、様々なレイアウトをflexboxのみで作成することができるのが強みです。

これからWebサイトやWebアプリケーションを作るのであれば必須の知識ですので、どんなことができるかだけでも覚えておきましょう。

flexboxに限らずですが、HTMLやCSSは実際に手を動かしてどんな挙動を取るかを確認したほうが早く上達します。

解説を見ながら実際にエディタでコードを打って、マスターしていきましょう。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5