Flexboxの書き方入門（1） Webページレイアウト編【図解たっぷり】
Flexbox超入門編
Webページをレイアウトするときに便利なFlexbox機能ですが、「どんなことができるの？」「なんか面倒そう」という懸念がある人もいるのではないでしょうか。
ちょっと前まで（今も）頻繁に使われていたfloat機能が洗濯板だとしたら、Flexboxは全自動ドラム式洗濯機のように便利です。まぁ、それだけ凄いということですね。
覚えることは少しありますが、そんなに多くありません。なので、少し勉強すればOKです。それだけで全自動ドラム洗濯機が手に入れば嬉しいですよね。
今回はそんなFlexboxとは何者なのか？ということから、Flexboxの基本操作を学んでいきましょう。
Flexboxとは何かを理解する
そもそもFlexboxとは何なのでしょうか。簡単に言うと『決められた範囲（コンテナ）内でコンテンツ（BOX）を横向きに幅も高さも自由にレイアウトできる』仕組みのことです。
とはいえ言葉だけではピンときませんよね。1つ簡単な例を見て見ましょう。
緑の枠のclass名がcontainerという箱の中に1~3までの3つのBOXが入っています。
コチラをコードにするとこのようになります。
<div class="container">
<div class="box1">
<p>1</p>
</div>
<div class="box2">
<p>2</p>
<p>box2です</p>
</div>
<div class="box3">
<p>3</p>
</div>
</div>
今は、見た通り1～３と書かれたBOXが縦に並んでいます。ちなみにBOX2が２行になっているのは他の２つのBOXと高さを変える為です。
CSSはこのようになっています。
*{
margin: 0px;
padding: 0px;
}
.container {
border: solid 6px #abcf3e;
}
.box1 {
background-color: #daa520 ;
}
.box2 {
background-color: #d2691e ;
}
.box3 {
background-color: #dda0dd ;
}
この縦に並んだ３つのBOXですが、CSSにたった1行追加するだけで一気に横並びに変えることができるのです。
ではやってみましょう。
ここに魔法の1行display: flex;を追加してみましょう。
.container {
border: solid 6px #abcf3e;
/* 追加するコード*/
display: flex;
}
するとブラウザの表示はこのように変化します。
display: flex;というコードを追加したことによって、縦並びだった3つのBOXが一気に横並びに変化したことがわかります。これが冒頭で説明した『決められた範囲（コンテナ）内でコンテンツ（BOX）を横向きに幅も高さも自由にレイアウトできる』仕組みということです。
ちなみにBOX２は他の2つのBOXよりも高さがある分、横並びにした時も幅が広くなります。デフォルトではボックスの中に入っている文字や画像などの中身によって幅が決められるのです。
Flexboxが活躍するのはこんな場面！
Flexboxが一体何者なのかはわかりましたが、実際にどういった場面で使用するのでしょうか。例えば、あなたがこのようなWebページを作りたいとします。
この画像の赤枠のように3つのコンテンツを横並びで作ろうとしたらどうすればいいでしょうか。htmlを学んでいる皆さんは「floatを使えばいいんじゃない？」と思うかもしれません。
しかしfloatでコンテンツをキレイに横並びにしようとすると、float同士が干渉しあってなかなかうまくいかなかったり、paddingやmarginの調節に骨が折れたり…といった経験がある方も多いのではないでしょうか。
そんな時に活躍するのがFlexboxです！
では例として3つのコンテンツを作ってみましょう。該当部分のhtmlとcssのコードは簡単に以下のようにしておきます。
【html】
<div class="container">
<div class="box1">
<h4>box1</h4>
<p>左のBOXです</p>
</div>
<div class="box2">
<h4>box2</h4>
<p>中央のBOXです</p>
</div>
<div class="box3">
<h4>box3</h4>
<p>右のBOXです</p>
</div>
</div>
【css】
.box1 {
background-color: #CCE3AD ;
}
.box2 {
background-color: #7ACAD4 ;
}
.box3 {
background-color: #4AA0D8 ;
}
コチラをブラウザで表示するとこのようになります。
今のところ3つのコンテンツは縦に並んでいる状態です。ではこれを最初の例のように一気に横並びに変えてみましょう。
追加するのはCSSのみです。
【css】
.container {
/* 以下のコードを追加*/
display: flex;
}
ではブラウザの表示はどのように変化したでしょうか。
見事！3つのコンテンツを横並びにすることができました！……と言いたいところですが、どう考えても画面の右側に余白が多すぎます。
でも安心してください、Flexboxを使うとこの余白の調整も非常に簡単にできるのです。
Flexboxと余白の親密な関係
ここまで『彗星のごとく現れた』や『魔法の一行』などといった表現を使ってきました。
この図を見る限り確かに複数のコンテンツを横並びにすることはできますがそれだけのようにも思えます。もちろんそれだけではありません。Flexboxは余白の調整能力にも非常に長けています。
この点も簡単な例を用いて確認してみましょう。
コンテンツの合計が入れ物（container）よりも小さい場合
冒頭の方で登場したこの画像ですが、最初にでてきたときから違和感を感じていた方もいたのではないでしょうか。
そうです。緑の枠（container）内に余白がうまれているのです。
この余白のことをポジティブフリースペースと呼びますが、要は余白ということです。
全てのコンテンツを横並びにするdisplay: flex;という縛りをかけたcontainer内に余白が生まれたとしましょう。Flexboxはその余白を自由に各コンテンツに分配することができます。
例えばこの余白を全て均等に各コンテンツに分配してみましょう。
この『contaicer内の余白をどのコンテンツにどれだけ分配するか』という割合を伸張比と呼びます。言葉は覚えなくても大丈夫です。
しかしFlexboxの解説サイトや参考書などを見ると伸張比と後からでてくる縮小比という単語がよく登場するのでなんとなくわかっておくと便利です。
コンテンツの合計が入れ物（container）よりも大きい場合
では先ほどの逆でコンテンツを全て横並びにした結果緑の枠（container）よりも横幅が長くなってしまった場合です。
図の赤枠部分のようにコンテンツがcontainerをはみ出してしまった部分をネガティブフリースペースと呼びます。が、こちらも特に覚える必要はないでしょう。
重要なのは、このはみ出してしまった部分をFlexboxが指定された割合で分割してそれぞれのコンテンツから削ることができるという点です。
はみ出したコンテンツを３等分にします。
各BOXから分割した分の幅を削ります。
その後、余白を自動的に詰めてcontainer内にコンテンツを収まるように調整してくれます。
containerからはみ出した部分を均等に各コンテンツからマイナスするとcontainer内に全てのコンテンツが収まりました！
このようにFlexboxでは、container内の余白も、contaninerをはみ出したコンテンツも指定通りに分割することができます。また、分割したものは各コンテンツに割り振ったり、各コンテンツから削ったりできるのです。
では次は実際にcssでのプロパティの指定方法を見ていきましょう。
Flexboxのプロパティの指定方法
ではまず初めにFlexboxのプロパティの指定方法の基本を確認していきましょう。例えば冒頭で紹介したこのような縦並びの3つのコンテンツがあるとします。
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
これを幅900pxのcontainer内にbox1~box3までそれぞれ100px/200p/300pxの幅で配置したい場合はcssはどのような表記になるでしょうか。
先に解説した伸張比（余白の振り分け）も縮小比（はみ出し部分の削り取り）も不要であれば、cssの表記は以下のようになります。
.container {
display: flex;
max-width: 900px;
}
.box1 {
flex : 0 0 100px
}
.box2 {
flex : 0 0 200px
}
.box1 {
flex : 0 0 300px
}
この
flex : 0 0 〇〇px
を見ると最後の〇〇px部分が、『コンテンツがcontainer内のどの程度の幅になるかを指定している』ということはなんとなくわかります。
ではその前の、 flex : 0 0という部分は何を表しているのでしょうか？
このプロパティはflex :伸張比 縮小比 〇〇pxという意味を持っているのです。
余白（ポジティブフリースペース）におけるFlexboxのプロパティ
flex :伸張比 縮小比 〇〇pxという意味をもっているのです、なんて言われてもピンときませんよね。まずはこの図を見てください。
先ほどの以下のコードで指定したように、幅900pxのconainer内にはbox1=100px、box2=200px、box3=300pxの合計600pxのコンテンツが含まれています。
.container {
display: flex;
max-width: 900px;
}
.box1 {
flex : 0 0 100px
}
.box2 {
flex : 0 0 200px
}
.box1 {
flex : 0 0 300px
}
つまり、この時点での余白（ポジティブフリースペース）は300pxということになります。
伸張比を指定してみよう
ではここで、この余白となっている300pxを各コンテンツに振り分けてみましょう。
まずは、300pxを3つのコンテンツそれぞれに平等に振り分けるにはどうしたらよいでしょうか。イメージとしてはこのような感じです。
ここでflex :伸張比 縮小比 〇〇pxを使います。今回は余白（ポジティブフリースペース）の比率なので伸張比を決めましょう。
平等に振り分けるということなので、box1 box2 box3への余白の振り分けの比率は全て１となります。
つまりflex : 1 縮小比 〇〇pxということです。最後の〇〇pxにはそれぞれに割り振られている横幅が入ります。
.container {
display: flex;
max-width: 900px;
}
/* 伸張比を追加したコード*/
.box1 {
flex : 1 0 100px
}
.box2 {
flex : 1 0 200px
}
.box1 {
flex : 1 0 300px
}
今回は余白を振り分ける伸張比の為、縮小比は関係ありません。その為、縮小比は０でOKです。
確認してみよう
では実際にブラウザの表示の変化を確認してみましょう。
冒頭で使用した以下のコードを準備してください。
【html】
<div class="container">
<div class="box1">
<h4>box1</h4>
<p>左のBOXです</p>
</div>
<div class="box2">
<h4>box2</h4>
<p>中央のBOXです</p>
</div>
<div class="box3">
<h4>box3</h4>
<p>右のBOXです</p>
</div>
</div>
【css】
.container {
display: flex;
}
.box1 {
background-color: #CCE3AD ;
}
.box2 {
background-color: #7ACAD4 ;
}
.box3 {
background-color: #4AA0D8 ;
}
現在のブラウザ表示はこのようになっているはずです。
まずはcontainerの幅を900pxに設定します。さらにcontainerの枠がわかりやすいように色をつけましょう。
次に各boxの横幅をそれぞれ100px/200px/300pxに変更しましょう。
【css】
.container {
display: flex;
/* 以下のコードを追加*/
width: 900px;
border: solid 6px #abcf3e;
}
.box1 {
background-color: #CCE3AD ;
/* 以下のコードを追加*/
width: 100px;
}
.box2 {
background-color: #7ACAD4 ;
/* 以下のコードを追加*/
width: 200px;
}
.box3 {
background-color: #4AA0D8 ;
/* 以下のコードを追加*/
width: 300px;
}
ブラウザを更新します。
container内の右側には、300px文の余白（ポジティブフリースペース）ができています。
この余白を均等に3つのboxiに割り振ってみましょう。
flex : 1 縮小比 〇〇pxにあてはめると今回は余白（ポジティブフリースペース）の為縮小比は無視して結構です。
【css】
.container {
display: flex;
max-width: 900px;
border: solid 6px #abcf3e;
}
.box1 {
background-color: #CCE3AD ;
width: 100px;
/* 以下のコードを追加*/
flex: 1 0 100px;
}
.box2 {
background-color: #7ACAD4 ;
width: 200px;
/* 以下のコードを追加*/
flex: 1 0 200px;
}
.box3 {
background-color: #4AA0D8 ;
width: 300px;
/* 以下のコードを追加*/
flex: 1 0 300px;
}
このコードをブラウザで確認するとこのようになります。
先ほどcontainerの右側にあった余白が当分に分割され、各コンテンツに割り振られているのがわかります。
応用編
では次に少し応用的な振り分けにも挑戦してみましょう。box1には余白は振り分けず、box2に4、box3に1という振り分け方をするとどうなるでしょうか。
わかりやすく図にしてみましょう。
container内の余白を5分割して、4/5をbox2へ1/5をbox3に分配するということです。
このときCSSのプロパティは以下のように変化します。
【css】
.container {
display: flex;
max-width: 900px;
border: solid 6px #abcf3e;
}
.box1 {
background-color: #CCE3AD ;
width: 100px;
/* 以下のコードを変更*/
flex: 0 0 100px;
}
.box2 {
background-color: #7ACAD4 ;
width: 200px;
/* 以下のコードを変更*/
flex: 4 0 200px;
}
.box3 {
background-color: #4AA0D8 ;
width: 300px;
/* 以下のコードを変更*/
flex: 1 0 300px;
}
ブラウザを更新して確認してみましょう。
box1には余白は分配されず、box2には300pxの余白の内240px（4/5）が、box3には60pxが分配されています。
先ほどの1:1:1で分配されたものと比較してみましょう。
[1:1:1]
[0:4:1]
このようにcssのプロパティを1つ変更するだけでコンテンツの横幅を自由に調整することができるのです。
余剰（ネガティブフリースペース）におけるFlexboxのプロパティ
余白を分配する方法は理解できたでしょうか？
次はcontainerからコンテンツがはみ出た場合（ネガティブフリースペース）のプロパティの指定方法をみていきましょう。
基本は余白の分配方法と変わりません。
** 幅が900PX のcontainerに3つのBOXの幅の合計が1200pxの場合**
3つのコンテンツを包むcontainerの幅が900pxなのに対して、コンテンツの幅の合計が1200pxの場合、つまり300pxの余剰（ネガティブフリースペース）ができます。
コードは以下のようになります。
【html】
<div class="container">
<div class="box1">
<h4>box1</h4>
<p>左のBOXです</p>
</div>
<div class="box2">
<h4>box2</h4>
<p>中央のBOXです</p>
</div>
<div class="box3">
<h4>box3</h4>
<p>右のBOXです</p>
</div>
</div>
【css】
.container {
display: flex;
max-width: 900px;
}
.box1 {
background-color: #CCE3AD;
width: 600px;
}
.box2 {
background-color: #7ACAD4;
width: 400px;
}
.box3 {
background-color: #4AA0D8;
width: 200px;
}
縮小比を指定してみよう
ではここで、この余剰となっている300pxを各コンテンツから取り除いてみましょう。
余剰（ネガティブフリースペース）の300pxを3等分（100pxずつ）にします。
伸張比と同様にflex : 伸張比 1 〇〇pxにあてはめると縮小比が設定されコンテンツから余剰分が削除されます。
プロパティの書き方は以下の通りです。
【css】
.container {
display: flex;
width: 900px;
}
.box1 {
background-color: #CCE3AD;
/* 以下のコードを変更*/
flex: 0 1 600px;
}
.box2 {
background-color: #7ACAD4;
/* 以下のコードを変更*/
flex: 0 1 400px;
}
.box3 {
background-color: #4AA0D8;
/* 以下のコードを変更*/
flex: 0 1 200px;
}
イメージとしてはこのような感じです。
各BOXから100pxずつ削ります。
削った後の隙間を詰めます。
900pxの幅に3つのコンテンツがピッタリと収まるようになりました。
↓
応用編
では、伸張比と同様に比率を変えてみましょう。
今回はBOX1:BOX2:BOX3の縮小比を2:1:0にしてみます。
【css】
.container {
display: flex;
width: 900px;
}
.box1 {
background-color: #CCE3AD;
/* 以下のコードを変更*/
flex: 0 2 600px;
}
.box2 {
background-color: #7ACAD4;
/* 以下のコードを変更*/
flex: 0 1 400px;
}
.box3 {
background-color: #4AA0D8;
/* 以下のコードを変更*/
flex: 0 0 200px;
}
コチラもわかりやすく図で確認してみましょう。
Flexboxが余剰分の300pxを3等分した内の200pxをBOX1から、100pxをBOX2から削ってくれるのです。
縮尺比の違いでBOXのサイズが変化しているのを確認してみましょう。
縮小比が1:1:1の場合
縮小比が2:1:0の場合
このように伸張比同様、containerからはみでた部分も自由に各コンテンツから削り取ることができるのです。
まとめ
今回はFlexboxの基本の『き』とも呼べる内容を紹介しました。もちろんこの他にもFlexboxには便利な機能がたくさんあります。
思いどおりにレイアウトができない…という時にぜひ活用してみてください。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
4月21日まで