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 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; margin-top:0em">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 Copy and paste these codes for broken links in your sandbox and see if you can fix them: <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
 * 
 * [Missouri, United States Genealogy|Missouri]
 * &lt;a ref="https://en.wikipedia.org/wiki/Main_Page"&gt;Wikipedia&lt;/a&gt;
 * Missouri, United States GenealogyMissouri
 * [Wikipedia]
 * Missouri, United States Genealogy

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz
 * How can links be broken?
 * A. Too many brackets.
 * B. Not enough brackets.
 * C. Wrong kind of brackets.
 * D. No space in an external link between URL and name of link.
 * E. No pipe in an internal link between name of page and name of link.
 * F. Using the URL as the name of the link.
 * G. All of the above.

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