Help:Wiki University Flexbox - Misc Flexbox Attributes

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


 * This also works with:


 * Column reverse flex-direction:column-reverse 
 * Wrap reverse flex-wrap:wrap-reverse 

Streching boxes align-items:stretch

Maine Page Research Help Wiki Help 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  Main Page Research Help Wiki Page Get Involved For our next attributes we will start with this arrangement of the boxes Maine Page Research Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:red; max-height:150px">Wiki Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:#ffd699; max-height:75px">Get Involved <h2 style="font-size:2vw; 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="flex:1; display:flex; align-items:center; justify-content:center; background-color:yellow; min-height:50px">Maine Page <div style="flex:2; display:flex; align-items:center; justify-content:center; background-color:orange; min-height:100px">Research Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:red; min-height:150px">Wiki Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:#ffd699; min-height:75px">Get Involved <h2 style="font-size:2vw; 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">Maine Page <div style="flex:2; display:flex; align-items:center; justify-content:center; background-color:orange; min-height:100px">Research Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:red; min-height:150px">Wiki Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:#ffd699; min-height:75px">Get Involved <h2 style="font-size:2vw; 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="flex:1; display:flex; align-items:center; justify-content:center; background-color:yellow; min-height:50px; font-size:1.vw">Maine Page <div style="flex:2; display:flex; align-items:center; justify-content:center; background-color:orange; min-height:100px; font-size:2vw">Research Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:red; min-height:150px; font-size:1.5vw">Wiki Help <div style="flex:1; display:flex; align-items:center; justify-content:center; background-color:#ffd699; min-height:75px; font-size:2vw">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:1.5vw; background-color:#fcefcf; padding:0.2vw">Try these out

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> Exercises

1. Create three boxes of equal width and the height of 150 pixels and place them in a row. 2. Center the first name of a friend in each of the boxes.

<div style="width:12.5vw; height:30px; padding-top:3px; padding-left:1vw; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<div style="border-top:1vw 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 both vertically and horizontally is very hard to achieve in Wikitext alone. A. True B. False

<div style="width:12.5vw; height:30px; padding-top:3px; padding-left:1vw; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<< Previous Chapter