DEMO
See the Pen flexbox by kimmy (@kimmy) on CodePen.
子要素の数に依存せずに、コンテンツ幅を均等にして並べたいことがあると思います。
そんな時に便利なのがflexboxです。
+ボタンを押していただくとわかりますが、子要素を増やすと自動でコンテンツ幅が調整されます。
そうこれがflexboxの力なのです。
HTML
<ul id="wrapper" class="wrapper"> <li class="list"></li> </ul> <div id="btn" class="btn">+</div>
CSS
html { height: 100%; } body { height: 100%; background: #e3e3e3; } .wrapper { display: flex; width: 100%; height: 100%; } .list { flex-grow: 1; background: #6200EA; box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset; } .list:nth-child(even) { background: #00C853; } .btn { position: absolute; bottom: 50px; right: 50px; border-radius: 50%; width: 80px; height: 80px; color: #fff; font: 40px AvenirNext-Heavy; text-align: center; line-height: 85px; background: rgba(0, 0, 0, .9); cursor: pointer; user-select: none; box-shadow: 0 0 4px rgba(0, 0, 0, .2); }