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 (the top tool bar is configured this way).

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 the background colors were left out and borders on the side and bottom were included.

Small space between items in a tool bar What if we want to have control over the space between items 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 <div style="width:20%; height:100px; display:flex; align-items:center; justify-content:center; background-color:green; font-size1em">GET INVOLVED


 * Here we can use widths for each item. Lets set the width of each of them at 30%.
 * This leaves, in our example, a remainder of 10% to be divided up between each of the items or 5% between our three item tool bar.
 * Then we use "justify-content:space-between" attribute to divide up the 10% without us having to do any math calculations.
 * You could use 'justify-content:space-around" to put part of the 10% on either end of the tool bar which reduces space between the items.

Here is the coding using "justify-content:space-between": <div style="display:flex; justify-content:space-between "> <div style=" width:30% ; height:100px; background-color:yellow; font-size:1.5em">1 <div style=" width:30% ; height:100px; background-color:orange; font-size:1.5em">2 <div style=" width:30% ; height:100px; background-color:red; font-size:1.5em">3

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