FlexBox便利だけど大変!?便利に使うための書き方をご紹介webデザイナーのむーみんです。以前、FlexBoxについての記事を書きましたが、出だした頃はブラウザによって効かないとかIE9では見れないなど何かと厄介だったけど、いろんな対策・書き方を知っていたら何かと便利だと思うはず!ということで、FlexBoxを使うために知ってたら得するコーディング方法をご紹介します。flex;上記で記述してあげると、どのブラウザでもFlexBoxが使用できますが、古いバージョンでのブラウザでは検証していないので、各最新ブラウザとIE10は、今のところ大丈夫そうです。)IE9にも対応させたい場合は、flexibility.jsを使用します。flex;を追加します。IE9はエミュレーターでは実装してくれないので、実機で確認してみてください。column;flexコンテナ内でflexアイテムをどのように配置するかを指定します。引用参考サイト:https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction縦並び1縦並び2縦並び3縦並び4PCでは横並びで、スマホでは縦並びにしたい時に便利ですね。class="flex-box-horizontal"><li>横並び1</li><li>横並び2</li><li>横並び3</li><li>横並び4:<br>文字数がバラバラでも高さは合います。アイテムをどのように配置するかを指定します。引用参考サイト:https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction横並び1横並び2横並び3横並び4文字数がバラバラでも高さは合います。class="flex-box-horizontal-wrap"><li>横並び1</li><li>横並び2</li><li>横並び3</li><li>横並び4:<br>文字数がバラバラでも高さは合います。block;でコードを表示非表示の切り替えをしていた人は、ぜひ活用してみてください。横並び1横並び2横並び3横並び4:文字数がバラバラでも高さは合います。横並び5横並び62段以上にしたい時に便利!使い方によってはとても便利なので、いつもコーディングする場合は、floatを使用するboxを2種類とFlexBoxを2種類ぐらいのスタイルを作って振り分けをしています。今は基本レスポンシブ対応のコーディングなので記述を出来るだけ少なくしてコーディング時間を時短していきましょー!でも、気を付けたいのが、FlexBoxの子要素にfloatがかかっていると、safariでは崩れちゃうので、使い分ける時は注意したほうが良いですね。正しい記述を理解して、活用してみてください。声お問い合わせNORENは、株式会社のれんの登録商標です。弊社は、株式会社のれんと提携しNOREN製品をご提案・ご提供しております。