Edited at

手を動かして覚える!flexboxの動作確認できるページを作りました

More than 3 years have passed since last update.


はじめに

先日、旧IEのサポートが切られました。

flexboxは便利らしいけど、まだまだ実用性が無いンゴねぇ......残念残念。

と言って逃げる訳にはいかなくなりそうです。

flexboxを今まで見てみぬフリしてきた私ですが「いい加減覚えなきゃ......」と思い、動作を試せるページを作成しました。

本稿では「flexboxの大まかなポイント」と「作成したページ」を紹介します。

特に私と同じようにflexboxについての記事を読んでもよく分からなかった人のお役に立てれば幸いです。

[作成したflexbox動作確認ページ]

http://nekoneko-wanwan.github.io/demo/flexbox/

[目次]


  • はじめに

  • これだけ押さえておけば勝てる!

  • できれば知っておきたいこと

  • flexbox動作確認ページについて

  • 終わりに


これだけ押さえておけば勝てる!

プロパティがたくさんあるせいか、個人的にflexboxは取っ付きにくい印象があります。しかし、押さえておくべきポイントはそう多くありません。とりあえず以下を知っておけば9割方勝ったようなものです!負けたらゴメンネ


  • flexboxは「親」と「子」で構成される

  • flexboxスタイルを使うには、「親」にflexboxを使うぞ!と指定するだけ(displayプロパティを使用)

  • 「親」には「子」をどんな風にレイアウトさせるかのルールを設定する

  • 「子」には、その子に適用させたい個別のスタイルを設定する

以下ざっと順番に見ていきたいと思います。

また以降は「親」⇒コンテナ、「子」⇒アイテムと表現します


flexboxはコンテナとアイテムで構成される

まずはhtmlを入れ子にします。


flexbox.html

<div class="flexbox-container">

<div class="flexbox-item"></div>
<div class="flexbox-item"></div>
<div class="flexbox-item"></div>
</div>


flexboxスタイルを使うには、flexコンテナを定義するだけ


  • flexboxスタイルを使うには、flexコンテナの定義が必要です。

  • flexコンテナの定義は、コンテナとなる要素にdisplay: flex || inline-flex; を指定するだけです。

  • flexコンテナの子要素は自動的にflexアイテムとして見なされます。

  • flexコンテナとflexアイテムにはデフォルト値があり、これだけでスタイルが自動設定されます。


flex.css

.flexbox-container {

display: flex; /* or inline-flex */
}

後は好きなように初期レイアウトをカスタマイズしていく設定になります


コンテナにアイテムのレイアウトルールを設定する

flexコンテナには、flexアイテムをどのようなルールでレイアウト・配置するかのスタイルを設定します。

※ルールにより別途flexアイテムに指定したスタイルが無視されることもあります(例えばfloatは指定しても無視されます)。

flexコンテナに設定できる主要スタイル

プロパティ
概要

display
コンテナに必ず指定する
指定すると子要素はアイテムと見なされる

flex-direction
アイテムをどの方向に並べるか
水平・垂直

flex-wrap
アイテムを1行or複数行にするか

justify-content
directionに沿ったアイテムの水平の揃え方

align-items
directionに沿ったアイテムの垂直の揃え方

align-content
アイテムの行ごとの揃え方
複数行あり、親との間に隙間がある場合に有効


flex-directionによって見た目上の水平・垂直方向が異なります



flex-container.css

.flexbox-container {

display: flex;
/* 以下、デフォルト(指定しないとこの値が使用) */
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}


flexアイテムには適用させたい個別スタイルを設定する

flexアイテムには、どのように表示させるかの個別設定ができます。

例えば、他アイテムより幅を拡大・縮小したり、親の決めた整列ルールを上書きしたり、など。

アイテムに設定できる主要スタイル

プロパティ
概要

order
アイテムの順番を指定する

flex-grow
アイテムの伸びる倍率を指定する

flex-shrink
アイテムの縮む倍率を指定する

flex-basis
アイテムの幅・高さを指定する
幅か、高さかはdirectionによる

align-self
コンテナのalign-itemsより優先する


flex-item.css

.flexbox-item {

/* 以下、デフォルト(指定しないとこの値が使用) */
order: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
align-self: auto;
}
.flexbox-item:nth-child(2) {
flex-grow: 1;
}


できれば知っておきたいこと


  • 一部プロパティをまとめて書けるショートハンドが存在する

  • ブラウザによってprefixの書き方が違うものがある


ショートハンドの存在

コンテナおよびアイテムのプロパティには、複数まとめて指定できるショートハンドがあります。

名前からコンテナ・アイテムどちらの指定か分かりにくいですが、いずれかのプロパティをまとめたもの、と覚えておくだけでも理解が早いと思います。


flexコンテナ


flex-container-shorthand.css

.flexbox-container {

flex-flow: <flex-direction>, <flex-wrap>;
}


flexアイテム


flex-item-shorthand.css

.flexbox-item {

flex: <flex-grow>, <flex-shrink>, <flex-basis>;
}


prefixには書き方が違うものがある

flexboxは書き方がちょこちょこ変わった経緯があります。

そのため単純に-ms-などをつけるだけでは対応できないものも存在します。

手動で書くのは大変なので、autoprefixerなど機械的に対応したいところです。


prefix.css

.flex-container {

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}


flexbox動作確認ページについて

実際にプロパティの値でレイアウトがどのように適用されるのか、簡単に分かるようなページを作成したのでご紹介します。

[作成したflexbox動作確認ページ]

http://nekoneko-wanwan.github.io/demo/flexbox/


  • コンテナおよびアイテムのプロパティを操作し、カラムの動きがリアルタイムに確認できます

  • CSS Flexible Box Layout Module Level 1をベースとしています

  • prefixは付けましたが、動作はchrome最新版でのみ確認しました

[イメージ画像]

flexbox動作確認ページ.png


終わりに

間違い・誤解を招きそうな表現などあればご指摘ください!


参考サイト