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 spaces around boxes - justify-content:space-around

What if we want to move the boxes so that there is a small amount of space between the end boxes and the edge of the container. Here is the next Flexbox attribute: flex-content:space-around.

Main Page Research Help Wiki Help Get Involved Here is the coding:  Main Page Research Help Wiki Help Get Involved   NOTICE that the end boxes are in from the edge of the container by the amount equal to one half of the space between the boxes. 

Try these out  Quick Quiz

A. True B. False
 * You browser, by default, naturally puts all items on a page in a row.

A. True B. False
 * To put items in a row, you only need the coding "flex-content:center" in the opening div tag.

A. True B. False
 * To put space between the first and last item and the edge of the container, you use "flex-content:space-between."

A. True B. False
 * The reason for Flexbox is to allow a page to be seem more easily on a tablet.

A. True B. False
 * To put items in a column, you have to use "display:flex" in the opening div tag.

Check your answers << Last Chapter Next Chapter >>