• web制作

[css3] flexboxをそろそろ使っていくための検証

大和田
このエントリーをはてなブックマークに追加

古いブラウザのサポートが終わっていき、やっとcss3を使っていける環境が整ってきた様に思います。
今までは覚えてもしょうがない感はありましたがそろそろ覚えておいて損はないはずです。
というわけで、floatなどのレイアウト指定方法にとって変わるかもしれないflexboxについて調べてみます。

準備

flexboxを使用するためには、まず要素の範囲を限定するための箱が必要になります。
今回はクラス名「flex-base」という箱を作っていきます。

HTML

<ul class="flex-base flex-item01">
 <li>ホーム</li>
 <li>制作実績</li>
 <li>サービス</li>
 <li>会社案内</li>
 <li>お問い合わせ</li>
</ul>

コンテンツを囲んでいる「flex-base」に

CSS

.flex-base{
	color: #fff;/*色:白;*/
	text-align: center;/*テキスト寄せ:中央*/
	display: flex;
}
/*↓背景色↓*/
.flex-base li:nth-child(odd) {
	background: #000;
}
.flex-base li:nth-child(even) {
	background: red;
}

とdisplay:flex;を指定することで、準備は完了です。
flexboxは指定した時に自動的に横並びになるので、ナビゲーションっぽい作りにしています。

今回は中身のコンテンツ(アイテムと言ったりする様です)のあり方を指定できる
・flex-grow
・flex-shrink
・flex-basis
を検証していきます。

flexboxアイテムに設定できるcss

flex-growは他の同列のアイテムと比較して大きさを決めることができます。
flex-shrinkは他の同列のアイテムと比較してどれだけ縮まることができるかを決めることができます。
flex-basisはflexアイテムの基本幅を指定することができます。

そしてこれらは「flex」というやつでまとめて指定もできます。

CSS

.flex-item{
 flex:0 0 auto;
}

上記のような書き方をしますが、左から「flex-grow」「flex-shrink」「flex-basis」です。

CSS

.flex-item{
 flex-grow:0;
 flex-shrink:0;
 flex-basis:auto;
}

この二つは同じ意味になるってことですね。

早速、いろいろと数値をいじってみますがHTMLは一番上のものを基本として使い、クラス「flex-item01」を変更していく流れです。

①デフォルト設定 = flex:0 0 auto;

  • ホーム
  • 制作実績
  • サービス
  • 会社案内
  • お問い合わせ
CSS

.flex-item01 li {
	flex:0 0 auto;
}

とりあえず横並びになってくれました。

②flex-growの値を1に = flex:1 0 auto;

  • ホーム
  • 制作実績
  • サービス
  • 会社案内
  • お問い合わせ
CSS

.flex-item02 li {
	flex:1 0 auto;
}

要素をいっぱいに使っての横並びになりました。
きちんとした均等配置ではなく、文字数の違いによる幅の違いはそのまま配置されています。

③flex-growとflex-shrinkの値を1に = flex:1 1 auto;

  • ホーム
  • 制作実績
  • サービス
  • 会社案内
  • お問い合わせ
CSS

.flex-item03 li {
	flex:1 1 auto;
}

一つ上の設定と結果は変わらないようです。

④flex-shrinkの値を1に = flex:0 1 auto;

  • ホーム
  • 制作実績
  • サービス
  • 会社案内
  • お問い合わせ
CSS

.flex-item04 li {
	flex:0 1 auto;
}

デフォルト値と変わらない結果です。

⑤flex-basisの値を100pxに = flex:0 0 100px;

  • ホーム
  • 制作実績
  • サービス
  • 会社案内
  • お問い合わせ
CSS

.flex-item05 li {
	flex:0 0 100px;
}

幅の最低値が100pxとなっているのでデフォルトより長くなっています。
画面の幅を狭めると超えた部分が見えなくなります。

⑥flex-growの値を1に、flex-basisの値を100pxに = flex:1 0 100px;

  • ホーム
  • 制作実績
  • サービス
  • 会社案内
  • お問い合わせ
CSS
.flex-item06 li {
	flex:1 0 100px;
}

幅いっぱいに使いながら、文字数に関係なく均等配置になっています。
画面の幅を狭めると500px(100px X 5コンテンツ)以下は固定幅で、500px以上は画面幅いっぱいになるフレックスな配置になっています。

⑦flex-growとflex-shrinkの値を1に、flex-basisの値を100pxに = flex:1 1 100px;

  • ホーム
  • 制作実績
  • サービス
  • 会社案内
  • お問い合わせ
CSS

.flex-item07 li {
	flex:1 1 100px;
}

⑥と同じで幅いっぱいに使いながら、文字数に関係なく均等配置になっています。
画面の幅を狭めても均等配置を維持したまま縮まろうとします。

⑧flex-shrinkの値を1に、flex-basisの値を100pxに = flex:0 1 100px;

  • ホーム
  • 制作実績
  • サービス
  • 会社案内
  • お問い合わせ
CSS

.flex-item08 li {
	flex:0 1 100px;
}

幅の最低値が100pxとなっているのでデフォルトより長くなっています。
画面の幅を狭めて500px以下になった時に均等配置を維持したまま縮まろうとします。

もっと大胆に動きが見たい方へ

サンプルページがありますので思う存分、幅を変更してください。

サンプルページ

わかったこと

  • flex-growは基本的に0以外で指定した方が良い
  • flex-shrinkはflex-basisと同時に指定しないと意味がない
  • flex-basisで基本幅を指定した方がいろいろ無難な動きになる
  • というわけでナビゲーションとして使うならflex:1 1 200px;ぐらいが素敵

最後に

上記のパターンを見ていただけるとわかりますが、設定を少しいじるだけで様々な動きが実現できます。
しかし、正直これを想定したデザインを作る必要があるかは疑問しかありません。

今回はナビゲーションっぽく作りましたが、そもそも文字列が2行になった瞬間に詰むので
均等配置のナビはおとなしくdisplay:tableで作る方が良いですね。
今の所正直いらん気がしますが、今回見た箱の中身でなく箱自体に指定する方を知ったら評価が変わるかもしれませんので
いつの日か調べる日が来るかもしれません( ´ ▽ ` )ノ。

rss登録
このエントリーをはてなブックマークに追加