Help:Wiki University Flexbox - Misc Flexbox Attributes





<< Previous Chapter

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

Misc vertical alignment attributes
For our next attributes we will start with this arrangement of the boxes which all have max-heights  Maine Page Research Help Wiki Help Get Involved align-items:flex-end align-items:flex-end  <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
 * Here we will put in align-items:flex-end in the container tag
 * You will notice that all the boxes go to the bottom of the container.

Align-items:center
<div style="display:flex; align-items:center; flex-wrap:wrap; min-height:200px; max-width:1200px; border:1px solid red; background-color:lightgray; padding:5px"> <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
 * Here we will put in align-items:center in the container tag
 * You will notice that all the boxes go to the center of the container.

Align-items:baseline
<div style="display:flex; align-items:baseline; flex-wrap:wrap; min-height:200px; border:1px solid red; background-color:lightgray; padding:5px">
 * Here we will put in align-items:center in the container tag
 * 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.em">Maine Page <div style="flex:2; display:flex; align-items:center; justify-content:center; background-color:orange; min-height:100px; font-size:2em">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.

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.5em; height:30px; padding-top:3px; padding-left:1em; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<div style="border-top:1em 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.5em; height:30px; padding-top:3px; padding-left:1em; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<< Previous Chapter