Help:Wiki University Flexbox - Misc Horizontal

<< Previous Chapter Next Chapter >>

Items at opposite ends.

Let say you want to create a tool bar that looks like this.

Main Page  Research Help Wiki Help Get Involved


 * How do we get items to separate and locate at opposite ends of a horizontal tool bar?
 * Just install another item between the items with a flex vaule of 4 or 5 or whatever works right.
 * Then make it invisible by giving it a background color of white.

Here is the coding: Main Page    Research Help    Wiki Help    Get Involved   Note: that borders on the side and bottom were added.  Rather looks like the tool bar at the top of the page, but with background colors.

Controlling spaces between boxes justify-content:space-between What if we want to have control over the space between the boxes and not be subject to the default space that comes with "justify-content:space-between" or justify-content:space around."

Main Page Research Help Wiki Help Get Involved <ul> <li style="font-size:1.2em">Lets set the width of each of the boxes to 200px and the length of the row to max-width of 1200px. </li> <li style="font-size:1.2em">This leaves, in our example, a remainder of 4x200px=800px to be divided up in the three spaces between each of the items or 133.4px between the four boxes. </li> <li style="font-size:1.2em">By using the "justify-content:space-between" attribute it will create these spaces without us having to do any math calculations.</li> <li style="font-size:1.2em">However, know that this trick does not work with percentages.''</li> Here is the coding using "justify-content:space-between":</li> </ul> <div style="display:flex; flex-wrap:wrap; justify-content:space-between "> <div style=" width:200px ; display:flex; align-items:center; justify-content:center ; height:100px; background-color:yellow">Main Page <div style=" width:200px ; display:flex; align-items:center; justify-content:center ; height:100px; background-color:orange">Research Help <div style=" width:200px ; display:flex; align-items:center; justify-content:center ; height:100px; background-color:red">Wiki Help <div style=" width:200px ; display:flex; align-items:center; justify-content:center ; height:100px; background-color:red">Get Involved

<h2 style="font-size:2vw; background-color:#fcefcf; padding:0.2vw">Try these out

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> Exercises

1. Take these five items and make a tool bar that is 1200 pixels wide. Item 1 Item 2 Item 3 Item 4 Item 5 2. Create a six item tool bar with the blank space being "flex:3." 3. For extra credit, place borders on three side of each item. 4. For double extra credit, install a background color to each item except for the blank item.

<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

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

1. It is impossible to control the space between boxes in a row. A. True B. False 2. It is not necessary to set the width of each item in order to customize the space between items in a row. 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 >>