はじめに
先日、旧IEのサポートが切られました。
flexboxは便利らしいけど、まだまだ実用性が無いンゴねぇ......残念残念。
と言って逃げる訳にはいかなくなりそうです。
flexboxを今まで見てみぬフリしてきた私ですが「いい加減覚えなきゃ......」と思い、動作を試せるページを作成しました。
本稿では「flexboxの大まかなポイント」と「作成したページ」を紹介します。
特に私と同じようにflexboxについての記事を読んでもよく分からなかった人のお役に立てれば幸いです。
[作成したflexbox動作確認ページ]
http://nekoneko-wanwan.github.io/demo/flexbox/
[目次]
- はじめに
- これだけ押さえておけば勝てる！
- できれば知っておきたいこと
- flexbox動作確認ページについて
- 終わりに
これだけ押さえておけば勝てる！
プロパティがたくさんあるせいか、個人的にflexboxは取っ付きにくい印象があります。しかし、押さえておくべきポイントはそう多くありません。とりあえず以下を知っておけば9割方勝ったようなものです！負けたらｺﾞﾒﾝﾈ
- flexboxは**「親」と「子」**で構成される
- flexboxスタイルを使うには、「親」にflexboxを使うぞ！と指定するだけ（displayプロパティを使用）
- 「親」には「子」をどんな風にレイアウトさせるかのルールを設定する
- 「子」には、その子に適用させたい個別のスタイルを設定する
以下ざっと順番に見ていきたいと思います。
また以降は「親」⇒コンテナ、「子」⇒アイテムと表現します
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アイテムにはデフォルト値があり、これだけでスタイルが自動設定されます。
.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によって見た目上の水平・垂直方向が異なります
.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より優先する |
.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コンテナ
.flexbox-container {
flex-flow: <flex-direction>, <flex-wrap>;
}
flexアイテム
.flexbox-item {
flex: <flex-grow>, <flex-shrink>, <flex-basis>;
}
prefixには書き方が違うものがある
flexboxは書き方がちょこちょこ変わった経緯があります。
そのため単純に-ms-などをつけるだけでは対応できないものも存在します。
手動で書くのは大変なので、autoprefixerなど機械的に対応したいところです。
.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最新版でのみ確認しました
[イメージ画像]
終わりに
間違い・誤解を招きそうな表現などあればご指摘ください！