Help:Wiki University Flexbox - Misc Flexbox Attributes

<< Last Chapter

Reverse row - flex-direction:row-reverse In our previous lesson, we ended up with a set of boxes in this order: Main Page Research Help Wiki Help Get Involved What if, for some reason, you wanted to just reverse the order to look like this:

 Main Page Research Help Wiki Help Get Involved To effect this change of order, without adding "order:#" to each box, we simply add the Flexbox attribute: flex-direction:row-reverse in the opening div tag. Here is the coding:  Main Page Research Help Wiki Page Get Involved

 <li style="font-size:1.2em">How do we get items to separate and locate at opposite ends of a horizontal tool bar? </li> <li style="font-size:1.2em">Just install another item between the items with a flex vaule of 4 or 5 or whatever works right.</li> <li style="font-size:1.2em">Then make it invisible by giving it a background color of white.</li> </ul>

Here is the coding: <div style=" flex:1; display:flex; align-items:center; justify-content:center; font-size:1em">Main Page <div style=" flex:5>   <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 <ul> <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 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