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 flex:5 was only added to the inline style of our "invisible box" because we wanted to effect only the width between "Main Page" and "Research Help." Borders on the side and bottom were added to each box.  Rather looks like the tool bar at the top of the page, but with background colors.

Controlling spaces between boxes justify-content:space-between <p style="font-size:1.3vw">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."

<div style="display:flex; flex-wrap:wrap; justify-content:space-between; background-color:lightgray; padding:5px; border:1px solid red"> <div style="width:200px; height:100px; display:flex; align-items:center; justify-content:center; background-color:yellow">Main Page <div style="width:200px; height:100px; display:flex; align-items:center; justify-content:center; background-color:orange">Research Help <div style="width:200px; height:100px; display:flex; align-items:center; justify-content:center; background-color:red">Wiki Help <div style="width:200px; height:100px; display:flex; align-items:center; justify-content:center; background-color:#ffd699">Get Involved

<li>Lets set the width of each of the boxes to 200px and the length of the row to max-width of 1200px. </li> <li>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>However since we are using the "justify-content:space-between" attribute it will create these spaces without us having to do any math calculations.</li> <li>This trick does not work with percentages.</li> <p style="font-size:1.3vw">Here is the coding using "justify-content:space-between"

<p style="font-size:1.3vw"> <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

<p style="font-size:1.3vw">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

<p style="font-size:1.3vw">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 >>