スマートニュース(SmartNews)風の表示とは 「スマートニュース(SmartNews)」とはスマートフォン用のニュースアプリです。巷では略して「スマニュー」なんて呼ばれています。 読み込みが速いため、いつも情報収集にお世話になっているアプリですが、レイアウトも見やすいんですよね。縦だけでなく、2〜3列で横並びになったりと見た目に変化があって記事が見つけやすいんです。 SmartNews ただ、この見た目をfloatやdisplay: inline-block;で実装しようとするとかなり面倒…と思っていたそんな時、柔軟に対応できるFlexboxの存在を知りました。次からは、Flexboxを使った実装方法をお伝えしていきますよ! 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてください。 See the Pen Flexboxでスマートニュース(SmartNews)風
![Flexboxでスマートニュース(SmartNews)風のレイアウトを実装する方法 - Design Color](https://cdn-ak-scissors.b.st-hatena.com/image/square/fa75ed146be823dfa8518bac0ac9bcd565daa730/height=288;version=1;width=512/https%3A%2F%2Fdesigncolor-web.com%2Fwp-content%2Fuploads%2F2017%2F11%2Fcss-flexbox-smartnews_thumb.jpg)