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

1. Take these five boxes and arrange them in a row with even spaces between: Item 1 Item 2 Item 3 Item 4 Item 5 2. Place these five boxes using the space around attribute

Check your answers

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

1. To put even spaces between boxes and no spaces at each end, you use "justify-content:space-around". A. True B. False 2. To place items in the middle of a page you need to use you use: "justify-content:middle?" A. True B. False 3. To place items on the right side of a page you need to use "justify-content:right-end?" A. True B. False

<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 >>