たまにはWEBデザイナーっぽい真面目な話を(^^;
最近WEBコーディングでグリッドレイアウトをする際に増えてきているフレックスデザイン（フレックスレイアウト・フレックスボックス）についてです。
WEBレイアウトでボックスのエリアを並べるコーディングとして、これまではfloatを使って幅を調整してクリアが多かったですが、このフレックス（flex）が今後主流になってくると思いますので、自分の理解も含めてまとめます。
flexレイアウトって何？
簡単にいうとボックスエリアを簡単に自由自在に並べるためのＣＳＳの最新プロパティです。
WEBサイト内で例えばエリアを横に3つ並べるとした場合、超古くはテーブルレイアウト（ダメですけど）、これまでの主流ではfloatで横に並べてクリアというのが一般でした。
もちろん、他にインライン要素で並べる方法や絶対配置で並べることもできます。
このようにflexが無くとも、横並びのボックスレイアウトは実現できたのですが、横幅の設定がシビアだったり、行ごとにクリアしたり、並びの数が定期的に増減するような場合は書き換えが地味に面倒だったりします。
※まあぶっちゃけ一度可変グリッドを組んでしまえば、それほど面倒でもないですが（それでもコードの複雑さの問題は残ります）。
flexレイアウトでは、フレックスを指定した親要素内の子要素が自由に並べることができるボックスエリアとして認識されます。子要素が縦にも横にも自由に並べられるから「flex」なのかと勝手に思っています。
flexレイアウトの実際の使い方
能書きはともかく、実践的な使い方です。
まず、CSSで親要素のエリアにflexプロパティを指定します。ulを外枠エリアにして、中のliをボックス要素として並べる例で考えます。
ul.flex-wrap {
display:flex;
width:100%;
flex-wrap:wrap;
}
親エリアのクラス名（任意）を、flex-wrapに。 position:flex;でフレックス利用を設定、幅は任意で大丈夫ですが、親要素の横幅100%に。そしてボックスエリアの折り返しを使うので、flex-wrap:wrap;としています。
次に横に並べたい子要素のCSS設定。
li.flex-items {
width: calc(33.33333% - 10px);
margin:5px;
}
フレックスで並べるアイテムのクラス名（任意）をflex-itemsで指定。
この子要素の幅指定でフレックスレイアウトの並び数が決まってくるので数値の設定が重要（肝）となります。基本的には並び数で割る％で横幅指定をすることが多いので、2列なら50％、3列なら33％、4列なら25％ということになります。
しかし、実際のレイアウトでは並び同士の余白を計算しないといけません。余白の指定の仕方はいろいろありますが、上記のCSSでは、余白を5px取るとして、その左右10pxを範囲から差し引くことで均等なら余白と並びを実現させるやり方です。
なお、flexレイアウトには、justify-contentという配置のレイアウトを決めるCSSもありますので、横幅100％使わないレイアウト(エリアの隙間、余りがある)であれば、
justify-content: space-between;
を親要素に指定することで、親要素の横幅内で自動で余白を取って並べれくれます。個人的にはあまり使わなそうですが、うーん便利。
justify-content:space-between; 均等幅で並べる
justify-content:space-between; 中央よりで均等に配置
など、レイアウトのためによく使う便利なプロパティですね！
なお、縦位置の配置調整は、align-itemsプロパティを使います。
flexレイアウトの実際の運用
flexレイアウトを実際に組み込んで使う場合は、並べる個数によって使いまわせるように、個数によって分けた横幅指定のflex用クラス（.class）を複数用意しておき、並び数に応じてflexクラスを使いまわす感じになるかと思います。
モバイルへのレスポンシブル対応は、スマホ閲覧時は並びの列を変えたければ、メディアクエリ(＠media)でモバイル時にクラスの横幅の指定を変更・上書きすれば問題ありません（もちろんその逆も）。
今回はflexレイアウトでのシンプルな横並びを例にしてますが、もっと複雑な並び方もできます。
最初に書きましたが、並べるだけなら他の方法もあるので、子要素ボックス幅の自動伸縮などがをflexレイアウトの真骨頂になるかもしれません。Flexレイアウトの奥は深い感じなので、極めたい方はコードを実際に組んで、サイズの違う画像などを並べて試してみることをお勧めします。
flexレイアウト対応のプラウザ状況
便利で使い勝手のいいflexレイアウトですが、問題はプラウザの対応状況ですね。
モダンプラウザはほぼflexレイアウトに対応していますが、一部のバージョンへの対応のプリフェックスとして、
display: -webkit-flex; display: flex;
を記載しておくと無難なようです。
【プラウザ対応の参考】
CSS Flexible Box Layout Module
コメント