入門10:【CSS/Flexbox】基本を抑えたい方へ・基礎知識とサンプル

入門10:【CSS/Flexbox】基本を抑えたい方へ〜基礎知識とサンプル CSS入門
CANIT先生
CANIT先生

前回は「入門9:【CSS/display】の使い方・注意点をすぐに理解したい人へ」でdisplayの使い方を見てきました。今回はCSSのFlexboxについて学んでいきましょう。お二人はFlexboxを知っていますか?

猫田さん
猫田さん

Flexboxは一度も使ったことがないなぁ……

牛山くん
牛山くん

Flexboxは聞いたことがありますよ。楽にレイアウトするための割と新しいCSSですよね

CANIT先生
CANIT先生

そのとおりです。Flexboxを使えば少ないコードでデザインを表現できるようになりますよ

CSSのFlexboxは要素を簡単に配置するためのプロパティです。複雑なコードを書かなくても要素を横並びに表示したり、並び順を指定して表示することができます。

Flexboxを使うとHTMLやCSSのコーディングの負担が軽減されるだけでなく、要素を隙間なく並べたデザインを簡単に再現できます。このページではサンプルを交えながらFlexboxの基礎知識について解説します

Flexboxの基本

Flexboxの基本
CANIT先生
CANIT先生

まずは、Flexboxがどんなものなのか解説しますね

Flexboxとは

CSSのFlexboxはプロパティではなく仕組みの名前です。実は、CSSにはFlexboxというプロパティはありません。

猫田さん
猫田さん

Flexboxはプロパティじゃないんだね

CANIT先生
CANIT先生

そうなんです。Flexboxはプロパティの名前ではなく、子要素を簡単に配置するための仕組みです

Flexboxを使う方法

Flexboxレイアウトを使いたいときは、以下のようにdisplayプロパティにflexの値を設定します。

div { display : flex; }

親要素に対してdisplay:flex;を指定すると、その要素の中でFlexboxレイアウトが使えるようになります

Flexboxのコンテナとアイテム

要素にdisplay:flex;を指定すると、その要素は自動的にFlexコンテナとして扱われます。Flexコンテナに内包される子要素はFlexアイテムと呼ばれ、難しい指定なしでも横並びでの表示や等間隔での表示が可能になります

牛山くん
牛山くん

子要素をFlexアイテムにするコマンドはありますか?

CANIT先生
CANIT先生

Flexアイテムにするコマンドは必要ないんです。Flexコンテナの中にある子要素は、自動的にFlexアイテムとして扱われますよ

Flexboxでできること

Flexboxを使うと以下のようなレイアウトを簡単に実現できます。

  • 子要素を横並び/縦並びにする
  • 隣接する子要素の余白を自動で調整する
  • 子要素の表示順をCSSで入れ替える

この中で一般的なCSSと大きく異るのが、子要素の表示順を入れ替える機能です。通常、要素はHTMLで書いた順番に表示されます。ブロック要素は上から下へ表示され、インライン要素は左から右へ表示されます。

しかし、FlexBoxを使うと、上から下、左から右という法則を逆にすることができます

Flexboxの分類

Flexboxは、親要素(Flexコンテナ)と子要素(Flexアイテム)を分けて考えると理解しやすいです。display:flex;を指定した要素はFlexコンテナとなり、内包される要素はFlexアイテムとなります。

猫田さん
猫田さん

コンテナの中にある要素は、勝手にFlexアイテムになるんだったね

CANIT先生
CANIT先生

Flexboxに関するプロパティは、Flexコンテナ用のプロパティとFlexアイテム用のプロパティの2つに分けられます。ここからは、それぞれのプロパティの種類について紹介していきますよ

Flexコンテナ用のプロパティ

Flexコンテナ用のプロパティ

Flexコンテナを定義する

要素をFlexコンテナにする方法は2つあります。例を紹介します。

HTMLタグ

<div class=”p1”>コンテナ1</div>
<div class=”p2”>コンテナ2</div>

CSS

.p1 { display : flex; }
.p2 { display : inline-flex; }

この例では、コンテナ1とコンテナ2の両方がFlexコンテナになります。2つの違いは、ブロック要素であるかどうかです。

コンテナ1はブロック要素として扱われ、コンテナ2はインラインブロック要素として扱われます。別の言い方をすると、コンテナ1はdisplay:block;の要素、コンテナ2はdisplay:inline-block;の要素になります

牛山くん
牛山くん

inline-flexを設定したとき、Flexアイテムがインライン要素になったりしますか?

CANIT先生
CANIT先生

flexとinline-flexのどちらを使ってもFlexアイテムには影響しません。2つの違いはFlexコンテナがブロック要素になるかインラインブロック要素になるかですね

並べ方を定義する

flex-directionプロパティを使うと、Flexアイテムの並び方を指定できます。flex-directionプロパティには以下の4つの値を設定できます。

flex-direction:row; 左から右
・flex-direction:row-reverse; 右から左
・flex-direction:column; 上から下
・flex-direction:column-reverse; 下から上

4つの値それぞれの例を紹介します。

flex-direction:row;

Flexアイテムを左から右へ並べます。

HTMLタグ

<div class=”fl”>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS

.fl {
    display : flex;
    flex-direction : row;
 }

子要素が「123」の順に横並びで表示されます。

flex-direction:row-reverse;

Flexアイテムを右から左へ並べます。

HTMLタグ

<div class=”fl”>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS

.fl {
    display : flex;
    flex-direction : row-reverse;
 }

子要素が「321」の順に横並びで表示されます。

flex-direction:column;

Flexアイテムを上から下へ並べます。

HTMLタグ

<div class=”fl”>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS

.fl {
    display : flex;
    flex-direction : column;
 }

子要素が「123」の順で、縦に並べて表示されます。

flex-direction:column-reverse;

Flexアイテムを下から上へ並べます。

HTMLタグ

<div class=”fl”>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS

.fl {
    display : flex;
    flex-direction : column-reverse;
 }

子要素が「321」の順で、縦に並べて表示されます。

CANIT先生
CANIT先生

これで並び方の指定についてはわかりましたか?

猫田さん
猫田さん

はーい! reverseがつくと並びが逆向きになるって覚えたよ

要素を一行に収めて表示する

flex-direction:rowやflex-direction:row-reverseを指定すると、子要素は横並びで一行に表示されます。このときの振る舞いを定義するのがflex-wrapプロパティです。

flex-wrapプロパティには以下の3つの値を設定できます。

flex-wrap:nowrap; 一行に配置
・flex-wrap:wrap; 複数行配置、上から下
・flex-wrap:wrap-reverse; 複数行配置、下から上
牛山くん
牛山くん

複数行配置がイマイチわかりません

CANIT先生
CANIT先生

たしかに箇条書きだけではわかりにくいかもしれません。3つの値を使った例を見てみましょう

flex-wrap:nowrap;

Flexアイテムを一行に配置します。横幅に合わせてアイテムが縮小されます。

HTMLタグ

<div class=”fl”>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS

.fl {
    width : 400px;
    display : flex;
    flex-wrap :nowrap;
 }

子要素が「123」の順に横並びで表示されます。親要素の幅である400ピクセルに収まるように子要素は縮小されます。

flex-wrap:wrap;

Flexアイテムを複数行に配置します。アイテムは縮小されません。左から右へ表示していき、横幅が足りない場合は次の行に続けて表示します。

HTMLタグ

<div class=”fl”>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS

.fl {
    width : 400px;
    display : flex;
    flex-wrap :wrap;
 }
.fl div {
    width : 100px;
}

子要素が1から順に横並びで表示されます。親要素の幅である400ピクセルに収まらないときは改行されます。この例では子要素の幅が100ピクセルなので1から4までが1行目に表示され、5と6が次の行に表示されます。

flex-wrap:wrap-reverse;

Flexアイテムを複数行に配置します。アイテムは縮小されません。アイテムを左下詰めで表示していき、横幅が足りない場合は上の行に表示します。

HTMLタグ

<div class=”fl”>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS

.fl {
    width : 400px;
    display : flex;
    flex-wrap :wrap-reverse;
 }
.fl div {
    width : 100px;
}

親要素のボックス内で、左下詰めで子要素が表示されます。この例では子要素の幅が100ピクセル、親要素の幅400ピクセルなので1から4までが一行に表示されます。5と6は、1から4の上の行に「56」と続けて表示されます。

その他のFlexコンテナ用プロパティ

猫田さん
猫田さん

Flexコンテナのプロパティは他にもあるの?

CANIT先生
CANIT先生

その他にもFlexコンテナ用のプロパティはたくさんありますよ。プロパティの内容をまとめて紹介しますね

flex-flow

flex-directionとflex-wrapの両方をまとめて指定するプロパティです。以下のように記述します。

flex-flow : column wrap-reverse;

justify-content

水平方向の表示と等間隔表示を指定します。以下の7つの値を指定可能です。

stretch コンテナサイズに合わせて均等表示
・flex-start 先頭寄せで表示
・flex-end 末尾寄せで表示
・center 中央寄せで表示
・space-between 両端余白なしで均等表示
・space-around 要素幅の半分の余白で均等表示
・space-evenly 要素と同サイズの余白で均等表示

align-items

垂直方向の表示を指定します。以下の5つの値を指定可能です。

stretch 親要素の高さに合わせて表示
・flex-start 先頭寄せで表示
・flex-end 末尾寄せで表示
・center 中央寄せで表示
・baseline ベースラインに沿って表示

align-content

垂直方向の表示と等間隔表示を指定します。以下の7つの値を指定可能です。

stretch コンテナに合わせて均等表示
・flex-start 先頭寄せで表示
・flex-end 末尾寄せで表示
・center 中央寄せで表示
・space-between 両端余白なしで均等表示
・space-around 要素幅の半分の余白で均等表示
・space-evenly 要素と同サイズの余白で均等表示

Flexアイテム用のプロパティ

Flexアイテム用のプロパティ
CANIT先生
CANIT先生

ここからはFlexアイテムに対して設定するプロパティを紹介しますね

order

orderはFlexアイテムの順番を指定するプロパティです。値には0、正の数、負の数を指定します。値の昇順でアイテムが表示されます。

HTMLタグ

<div class=”fl”>
    <div class=”item1”>1</div>
    <div class=”item2”>2</div>
    <div class=”item3”>3</div>
</div>

CSS

.fl { display : flex; }
.item1 { order : 2; }
.item2 { order : -5; }
.item3{ order : 77; }

この例ではアイテムが「213」の順で表示されます。

flex-grow

flex-growはアイテムの拡大を指定するプロパティです。値には0、正の数、負の数を指定します。Flexアイテムを親要素に合わせてストレッチさせるとき、flex-grow値の大きいアイテムが優先的に拡大されます。

HTMLタグ

<div class=”fl”>
    <div class=”item1”>1</div>
    <div class=”item2”>2</div>
    <div class=”item3”>3</div>
</div>

CSS

.fl { display : flex; }
.item1 { flex-grow : 0; }
.item2 { flex-grow : 1; }
.item3 { flex-grow : 0; }

flex-shrink

flex-shrinkはアイテムの縮小を指定するプロパティです。値には0か正の数を指定します。Flexアイテムを親要素に合わせてストレッチさせるとき、flex-shrink値の大きいアイテムが優先的に縮小されます。

0を指定した場合は例外的にオリジナルサイズを維持して表示します。

flex-basis

flex-basisはアイテムの初期サイズを決めるプロパティです。ピクセルやemなどの単位でwidthの値を指定します。

flex-basisはFlexアイテム用のwidth指定プロパティとして使います。widthプロパティでの指定とは違い、アイテムがコンテナに収まりきらないときはwidthの値を無視して自動縮小されます。

align-self

align-selfは、Flexコンテナに指定したalign-itemsの値を上書きするプロパティです。Flexアイテムに対して個別にflex-startやflex-endの表示方法を指定できます。

CSSのFlexboxまとめ

まとめ
CANIT先生
CANIT先生

はい。というわけで、以上がCSSのFlexboxの基礎知識でした。二人ともどうでしたか?

牛山くん
牛山くん

これからはFlexを使って簡単に横並びのコンテンツ配置ができそうです

猫田さん
猫田さん

バッチリわかったよ!

CANIT先生
CANIT先生

では、最後にFlexboxの情報を簡単にまとめておきましょう

親要素にdisplay:flexを指定すると、その要素がFlexコンテナ、子要素がFlexアイテムになります

Flexboxはプロパティ数が多くて仕組みも複雑ですが、マスターすると横並びのデザインが簡単に作ることが可能です。とくにjustify-contentプロパティを使えば、自動的に余白を作って等間隔にアイテムを並べられます。Web制作を効率化するためにぜひFlexboxを習得してみてください。

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
CSS入門
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました