Help:Wiki University Flexbox - Horizontal Spacing

<< Last Chapter Next Chapter >>

Creating space between boxes - justify-content:space-between

What if we want to move the boxes so there is an even amount of space between the boxes such as we might see in tool lines.
 * Here is the next Flexbox attribute: flex-content:space-between.

Main Page Research Help Wiki Help Get Involved   NOTICE that the boxes have the same amount of space between the two end boxes and the middle box. 

Here is the coding:  Main Page Research Help Wiki Help Get Involved

Creating space between boxes - justify-content:space-around

What if we want to move the boxes so there is an even amount of space between the boxes such as we might see in tool lines.
 * Here is the next Flexbox attribute: flex-content:space-between.

Main Page Research Help Wiki Help Get Involved   NOTICE that the boxes are evenly spaced with half the space between both end boxes. 

Here is the coding:  Main Page Research Help Wiki Help Get Involved

Try these out

 Exercises

Check your answers

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers << Last Chapter Next Chapter >>