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

If you draw a line immediately under anyone of the titles, you will see the other titles are touching that line as well.

<h2 style="font-size:2em; background-color:#fcefcf; padding:3px">Try these out

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises

1. Take these five items and make a tool bar that is 1200 pixels wide. Item 1 Item 2 Item 3 Item 4 Item 5 2. Reverse the order of the items. 3. Put these five items in a column and reverse the order.

<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

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz

1. To change the order of items in a Flexbox row you have to "cut and paste" A. True B. False 2. You cannot make the height of items all the same in a row without customizing the height of each until they are equal. A. True B. False 3. Centering a tile in a box that is higher in pixels than the height of the font is very hard to achieve in Wikitext alone. A. True B. False

<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