#flexstart { justify-content:flex-start; } #flexend { justify-content:flex-end; } #center { justify-content:center; } #spacebetween { justify-content:space-between; } #spacearound { justify-content:space-around; } .flexbox { display:flex; flex-direction:row; width:550px; } div { border:1px solid #cccccc; margin:5px; padding:5px; } div > div { background:#ffcc99; }
flex-start <div id="flexstart" class="flexbox"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> </div> flex-end <div id="flexend" class="flexbox"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> </div> center <div id="center" class="flexbox"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> </div> space-between <div id="spacebetween" class="flexbox"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> </div> space-around <div id="spacearound" class="flexbox"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> </div>