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:5 ; height:100px; >  <div style=" flex:1.5 ; height:100px; font-size:3em">RESEARCH HELP    <div style=" flex:1 ; height:100px; font-size:3em">WIKI HELP    <div style=" flex:1.5 ; height:100px; font-size:3em">GET INVOLVED   Note: that the background colors were left out and borders on the side and bottom were added.  Rather looks like the tool bar at the top of the page.

<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:2.1em">Try these out <div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"> Quick Quiz

A. True B. False
 * You can see all the stuff on this page on your smart phone just as you see it here?

A. True B. False
 * When viewing this page on your smart phone, you do not have to scroll to see all the width?

A. On the right of TOC. B. Under the MAIN PAGE. C. Under the TOC. D. None of the above.
 * Where might you see the SIDEBAR on your smart phone?

A. True B. False
 * The reason for Flexbox is to allow a page to be seem more easily on a tablet.

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