Help:Wiki University Flexbox - Misc Horizontal

<< Last 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    <div style=" flex:1.5; display:flex; align-items:center ; font-size:1em">Research Help    <div style=" flex:1; display:flex; align-items:center ; font-size:1em">Wiki Help    <div style=" flex:1.5; display:flex; align-items:center ; font-size:1em">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.

<h2 style="font-size:2em; background-color:#fcefcf; padding:3px">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."

<div style="width:200px; height:100px; display:flex; align-items:center; justify-content:center; background-color:yellow; font-size:1em">Main Page <div style="width:200px; height:100px; display:flex; align-items:center; justify-content:center; background-color:orange; font-size:1em">Research Help <div style="width:200px; height:100px; display:flex; align-items:center; justify-content:center; background-color:red; font-size:1em">Wiki Help <div style="width:200px; height:100px; display:flex; align-items:center; justify-content:center; background-color:#ffd699; font-size1em">Get Involved  <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; font-size:1em">Main Page <div style=" width:200px ; display:flex; align-items:center; justify-content:center ; height:100px; background-color:orange; font-size:1em">Research Help <div style=" width:200px ; display:flex; align-items:center; justify-content:center ; height:100px; background-color:red; font-size:1em">Wiki Help <div style=" width:200px ; display:flex; align-items:center; justify-content:center ; height:100px; background-color:red; font-size:1em">Get Involved

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

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises

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

Item 1 Item 2 Item 3 Item 4 Item 5 2.

<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

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

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