Help:Wiki University Flexbox - Horizontal Spacing

<< Previous 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 Here is the result:  Main Page Research Help Wiki Help Get Involved
 * NOTICE that the boxes have the same amount of space between each of the boxes.

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

What if we would like even space between the boxes but a small space on either side of the boxes or in other words, not have the end boxes immediately up against the right and left edge of the container. Here is the next Flexbox attribute: flex-content:space-between.

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


 * NOTICE that the space between the end boxes and the edges of the container is equal to one half the space between the boxes.

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

 Quick Quiz

<p style="font-size:1.3vw">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:12.5vw; height:30px; padding-top:3px; padding-left:1vw; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<< Previous Chapter Next Chapter >>