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 All through these lessons you will have noticed that our numbers in each box is in the upper left hand corner. This is the normal default position for anything place in a container which in this case is a colored box. But what if we want the numbers or text for that matter centered both horizontally and vertically as well? Here are two more Flexbox codes to show:  Horizontal centering - justify-content:center  Vertical centering - align-items:center </li> </ul> You can use one or both depending on the size of the container. <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:yellow; font-size:3em">1 <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:orange; font-size:3em">2 <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:red; font-size:3em">3

Here is the coding:

<div style=" flex:1; display:flex; align-items:center; justify-content:center background-color:yellow; font-size:3em">1 <div style=" flex:1; display:flex; align-items:center; justify-content:center background-color:yellow; font-size:3em">2 <div style=" flex:1; display:flex; align-items:center; justify-content:center background-color:yellow; font-size:3em">3 NOTICE to use these centering elements, you need to include "display:flex in the code for each element. NOTICE since our items have a height of 100 pixels, the align-items:center has an effect. If the height of the items were the same as the text inside, you would not necessarily see a change in vertical centering.

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