#flexstart { align-content:flex-start; } #flexend { align-content:flex-end; } #center { align-content:center; } #spacebetween { align-content:space-between; } #spacearound { align-content:space-around; } #stretch { align-content:stretch; } div { border:1px solid #cccccc; margin:5px; padding:5px; } div > div { background:#ffcc99; } .flexbox { display:flex; flex-direction:row; flex-wrap:wrap; width:500px; height:160px; }
flex-start <div id="flexstart" class="flexbox"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4</div> <div>Item5</div> <div>Item6</div> <div>Item7</div> <div>Item8</div> <div>Item9</div> <div>Item10</div> </div> flex-end <div id="flexend" class="flexbox"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4</div> <div>Item5</div> <div>Item6</div> <div>Item7</div> <div>Item8</div> <div>Item9</div> <div>Item10</div> </div> center <div id="center" class="flexbox"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4</div> <div>Item5</div> <div>Item6</div> <div>Item7</div> <div>Item8</div> <div>Item9</div> <div>Item10</div> </div> space-between <div id="spacebetween" class="flexbox"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4</div> <div>Item5</div> <div>Item6</div> <div>Item7</div> <div>Item8</div> <div>Item9</div> <div>Item10</div> </div> space-around <div id="spacearound" class="flexbox"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4</div> <div>Item5</div> <div>Item6</div> <div>Item7</div> <div>Item8</div> <div>Item9</div> <div>Item10</div> </div> stretch <div id="stretch" class="flexbox"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4</div> <div>Item5</div> <div>Item6</div> <div>Item7</div> <div>Item8</div> <div>Item9</div> <div>Item10</div> </div>