人が書いたCSSを大きく編集する必要があったんですけど
そのときにdisplay: flexが見慣れず、しっかりと動きを把握できてなかったので
調べてまとめたものです。
参考・引用リンク
より詳しく・正しいものはこちらです。
フレックスボックスとは、用途など
フレックスボックス（Flexbox）は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。
フレックスボックスレイアウト以前はフロートやpositionプロパティによるレイアウト実現が
長い間主流でしたが、調整にストレスがたまるものだったり、いくつか実現が困難なものがありました。
その辺りを簡単に、柔軟に、実現可能にするためのものがフレックスボックスです。
この記事内のサンプルのベース
See the Pen
Untitled by kken (@kentakomai)
on CodePen.
headerとかfooterとかいらない気もするけど、とりあえず見た目重視で。。。
フレックスボックスの書き方（超基礎)
コンテナと呼ばれる親要素の中に子要素（アイテム）を置いていきます。
まずはコンテナを宣言します。３つのarticleのラッパーになっている
.containerに対してdisplay: flexを宣言していきます。
See the Pen
flex box sample2 by kken (@kentakomai)
on CodePen.
これによって最初は画面横いっぱいに広がっていたarticleが３分割に横並びしました。
※インライン要素に対してフレックスボックスレイアウトを行いたい場合はdisplay: inline-flexを
利用します。
このサンプルではボックスは横並びになっているので
- 横方向が主軸(main axis)
- 縦方向が交差軸(cross axis)
と呼びます。
コンテナに指定可能なプロパティ
flex-direction
主軸の方向を指定するにはflex-directionプロパティを利用し、デフォルトはrowに
設定されています（横方向）これをcolumnにすること縦方向にレイアウトされるのが確認できます。
flex-wrap
デフォルトはno-wrap
no-wrapの場合アイテムがいくつあってもflex-direction方向にコンテンツを並べ続ける。wrapするとコンテナのサイズ内で上から下に向かって折り返すwrap-reverseするとコンテナのサイズ内で下から上に向かって折り返す
See the Pen
flex box sample3 by kken (@kentakomai)
on CodePen.
※CodePenのEmbedで効果がわかりやすいように値を調整していて、リンク先に行くとレイアウトが崩れて感じるかもしれません。
flex-flow
direction,wrapを一括指定できるもの。割愛
justify-content
コンテナ内に空きスペースがあった場合に、アイテムを水平方向のどの位置に
配置するかを指定するプロパティ。
文章で説明するの難しいのでチートシート参照
align-items
コンテナ内に空きスペースがあった場合に、アイテムを垂直方向のどの位置に
配置するかを指定するプロパティ
文章で説明するの難しいのでチートシート参照
アイテムに指定可能なプロパティ
flex-grow(アイテム)
親コンテナに余ったスペースがあった場合に、他の子要素に対してどれくらい伸びるかを指定できる。
指定は数値のみ、無単位です。
flex-shrink(アイテム)
growの逆で、他要素に対してどれくらい縮むかを指定できます。
同じく指定は数値のみ、無単位。
flex-basis(アイテム)
要素の幅を指定できます。使える値はwidthと同様。autoの場合はコンテンツに応じて
サイズが適用される。初期値はauto
flex(アイテム)
grow,shrink,basisの一括指定プロパティ。割愛
その他雑記
使い慣れるにはflexプロパティが肝になりそう。そしてフレックスボックスは入れ子にすること
が可能で、あるアイテムは、ほかのフレックスボックスのコンテナとすることも可能。
サンプルを作るのがめんどくさいので詳細は参考リンクをどうぞ。