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

1 2  3


 * 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: 1   2    3

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

1 2  3
 * 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":  1 2 3

Centering text

Try these out  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.

Check your answers

<< Last Chapter Next Chapter >>