Flexible Box Layoutでカラムレイアウト たとえば、左右にカラム分けされたレイアウトを作りたいとします。これをCSSで実現する方法は何通りも存在します。 過去にCodeGridで紹介したような*table-cellやinline-blockを利用したカラムレイアウトであったり、単純にfloatを使用したものであったり、display: grid;であったり……。 *注:これまでに紹介した記事 「display: tableの活用:フレキシブルな段組みレイアウト」 「display: tableの活用:フィットする特性と均等配置」 「display: tableの活用:流し込む方向の制御」 「inline layoutを使いこなす:カラムレイアウト」 方法は挙げればきりがないのですが、今回はCSS Flexible Box Layout Module(以下、Flexbox)に
![そこが知りたい、Flexbox | 第1回 仕様を知る 1](https://cdn-ak-scissors.b.st-hatena.com/image/square/b1af10ec00c5d8d0d86c0c1ef403df1dacadf55a/height=288;version=1;width=512/https%3A%2F%2Fcodegrid.imgix.net%2Fimage.png%3Fixlib%3Djs-3.8.0%26w%3D1200%26h%3D630%26mark%3Dhttps%253A%252F%252Fcodegrid.imgix.net%252F~text%253Fixlib%253Djs-3.8.0%2526w%253D1000%2526txt%253D%2525E4%2525BB%252595%2525E6%2525A7%252598%2525E3%252582%252592%2525E7%25259F%2525A5%2525E3%252582%25258B%2525201%2526txt-fit%253Dmax%2526txt-size%253D57%2526txt-font%253DHiragino%252520Sans%252520W5%2526txt-color%253Dfff%26mark-x%3D90%26mark-y%3D195%26blend%3D%2523E9315C%26blend-mode%3Doverlay%26txt%3D%25E3%2581%259D%25E3%2581%2593%25E3%2581%258C%25E7%259F%25A5%25E3%2582%258A%25E3%2581%259F%25E3%2581%2584%25E3%2580%2581Flexbox%2520%257C%2520%25E7%25AC%25AC1%25E5%259B%259E%26txt-align%3Dtop%252Cleft%26txt-font%3DHiragino%2520Sans%2520W5%26txt-size%3D30%26txt-pad%3D100%26txt-color%3Dfff)