実務から学ぶFlexbox 前編 マルチカラムレイアウトの実例 実案件でも使われることが多くなったFlexboxについて、業務で使用した実例を元に解説します。今回は、まずFlexboxを使う際に気をつけたいことを解説し、さらにマルチカラムレイアウトの実装を紹介します。 はじめに 実際の案件でCSS Flexible Box Layout Module(以下、Flexbox)を扱うことが多くなり、筆者の経験値は「そこが知りたい、Flexible Box」のシリーズを書いていた頃よりも溜まりました。そこで本シリーズでは2回に渡り、Flexboxを使う際に気にかけていること、実際の案件で使用したFlexboxによるレイアウト、Flexboxに関するバグを紹介していきます。 Flexboxの基本 本記事では、Flexboxのより実践的な内容を解説します。Flexboxの仕様や基本的な使い方について
![実務から学ぶFlexbox | 前編 マルチカラムレイアウトの実例](https://cdn-ak-scissors.b.st-hatena.com/image/square/d16b0b00d8102f9c964ad9ba8dbfff16acc37a1f/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%2525E3%252583%25259E%2525E3%252583%2525AB%2525E3%252583%252581%2525E3%252582%2525AB%2525E3%252583%2525A9%2525E3%252583%2525A0%2525E3%252583%2525AC%2525E3%252582%2525A4%2525E3%252582%2525A2%2525E3%252582%2525A6%2525E3%252583%252588%2525E3%252581%2525AE%2525E5%2525AE%25259F%2525E4%2525BE%25258B%2526txt-fit%253Dmax%2526txt-size%253D57%2526txt-font%253DHiragino%252520Sans%252520W5%2526txt-color%253Dfff%26mark-x%3D90%26mark-y%3D195%26blend%3D%2523BD1818%26blend-mode%3Doverlay%26txt%3D%25E5%25AE%259F%25E5%258B%2599%25E3%2581%258B%25E3%2582%2589%25E5%25AD%25A6%25E3%2581%25B6Flexbox%2520%257C%2520%25E5%2589%258D%25E7%25B7%25A8%26txt-align%3Dtop%252Cleft%26txt-font%3DHiragino%2520Sans%2520W5%26txt-size%3D30%26txt-pad%3D100%26txt-color%3Dfff)