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">This also works with:</li> <ul> <li style="font-size:1.2em">Column reverse flex-direction:column-reverse </li> <li style="font-size:1.2em">Wrap reverse flex-wrap:wrap-reverse </li> </ul> </ul> <h2 style="font-size:2em; background-color:#fcefcf; padding:3px; margin-top:15px">Streching boxes align-items:stretch

<div style="display:flex; align-items:stretch; flex-wrap:wrap; min-height:200px; max-width:1200px; border:1px solid red"> <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:yellow; font-size:1.5em">Maine Page <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:orange; font-size:1.5em">Research Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:red; font-size:1.5em">Wiki Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:#ffd699; font-size:1.5em">Get Involved

What if you want all the boxes in the above example to be all the same height regardless of what is inside of them? Check out align-items:stretch

Here is the coding <div style="display:flex; align-items:stretch ; flex-wrap:wrap; height:200px; border:1px solid red"> <div style=" flex:1; display:flex; align-items:center; justify-content:center ; background-color:yellow; font-size:1.5em">Main Page <div style=" flex:1; display:flex; align-items:center; justify-content:center ; background-color:orange; font-size:1.5em">Research Help <div style=" flex:1; display:flex; align-items:center; justify-content:center ; background-color:red; font-size:1.5em">Wiki Page <div style=" flex:1; display:flex; align-items:center; justify-content:center ; background-color:#ffd699; font-size:1.5em">Get Involved For our next attributes we will start with this arrangement of the boxes <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:yellow; max-height:50px; font-size:1.5em">Maine Page <div style="flex:2; display:flex; align-items:center; justify-content:center; background-color:orange; max-height:100px; font-size:1.5em">Research Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:red; max-height:150px; font-size:1.5em">Wiki Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:#ffd699; max-height:75px; font-size:1.5em">Get Involved <h2 style="font-size:2em; background-color:#fcefcf; padding:3px; margin-top:15px">align-items:flex-end align-items:flex-end Here we will put in align-items:flex-end and you will notice that all the boxes go to the bottom of the container. <div style="display:flex; align-items:flex-end; flex-wrap:wrap; min-height:200px; max-width:1200px; border:1px solid red"> <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:yellow; min-height:50px; font-size:1.5em">Maine Page <div style="flex:2; display:flex; align-items:center; justify-content:center; background-color:orange; min-height:100px; font-size:1.5em">Research Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:red; min-height:150px; font-size:1.5em">Wiki Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:#ffd699; min-height:75px; font-size:1.5em">Get Involved <h2 style="font-size:2em; background-color:#fcefcf; padding:3px; margin-top:15px">align-items:center align-items:center Here we will put in align-items:center and you will notice that all the boxes go to the center of the container. <div style="display:flex; align-items:center; flex-wrap:wrap; min-height:200px; max-width:1200px; border:1px solid red"> <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:yellow; min-height:50px; font-size:1.5em">Maine Page <div style="flex:2; display:flex; align-items:center; justify-content:center; background-color:orange; min-height:100px; font-size:1.5em">Research Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:red; min-height:150px; font-size:1.5em">Wiki Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:#ffd699; min-height:75px; font-size:1.5em">Get Involved <h2 style="font-size:2em; background-color:#fcefcf; padding:3px; margin-top:15px">align-items:baseline align-items:baseline Here we will put in align-items:center and you will notice that all the text in each box is different. What if we want them to be on the same base line regardless of the size of the text. <div style="display:flex; align-items:baseline; flex-wrap:wrap; min-height:200px; max-width:1200px; border:1px solid red"> <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:yellow; min-height:50px; font-size:1.0em">Maine Page <div style="flex:2; display:flex; align-items:center; justify-content:center; background-color:orange; min-height:100px; font-size:3em">Research Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:red; min-height:150px; font-size:1.5em">Wiki Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:#ffd699; min-height:75px; font-size:2em">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