<div class="flex-container row bg"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> </div> <div class="flex-container row bg"> <div class="flex-item">1</div> <div class="flex-item two">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> </div>
.flex-container { padding: 0; margin: 0; list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; } .row { -webkit-flex-direction: row; flex-direction: row; flex-wrap: normal; } .flex-item { background: tomato; padding: 5px; width: 50px; height: 50px; margin: 5px; line-height: 50px; color: white; font-weight: bold; font-size: 2em; text-align: center; flex-grow: 1; } .two { background: gold; flex-grow: 3; } .bg { background: lightgray; }