こんな使い方が!? 意外と知らないCSS Flexboxの応用 - Qiita今や横並びの標準といえばFlexboxという時代ですが、そんなFlexboxでも意外と知られてないであろう使い方をご紹介します。 記述量を減らしたり、動的なサイトで重宝したり、リキッドレイアウトにも対応できちゃいます。 IEを含め主要ブラウザに対応してます。 1. 一つが固定幅もう一つが残りの幅いっぱいの横並びボタン こんな感じのものを一度の横幅指定だけで作る html <ul class="list"> <li class="item-short"><a href="">リスト1</a></li> <li><a href="">リスト2</a></li> </ul> .list { display: flex; } .list li { border: 1px solid #ccc; flex: 1 0 0%; box-sizing: border-box; text-align: ce
