Help:Wiki University Flexbox - Display Vertical

<< Last Chapter Next Chapter >>



Flex-Direction

1 2  3
 * As stated in the lesson 3, the default of the browser is to stack items in a column.
 * However there may be an occasion because of coding that you need to specify that you want the items in a column.
 * Here is the next Flexbox attribute: flex-direction.
 * As you can see it looks like it would if the browser was controlling the placement.
 * So why would need this attribute?
 * The answer is in that fact you can put flex boxes inside of other flex boxes. Its like the ability we have to put tables inside of other tables.

What if we want to put a list inside of one of the boxes that is laid out horizontally? Here is where "flex-direction:column" comes in. Lets increase the width of our boxes to 150 pixels, eliminate the height attribute and put a list inside of box 1.

1 Item 1 Item 2 Item 3 2 3 Here is the coding:  1   Item 1    Item 1    Item 1     2    3
 * Everything inside the red box is the nested flex box with the items in a column.
 * Notice that the nested flex box is between the opening div tag of box 1 and its ending div tag.
 * This the same concept as nesting lists inside of list as shown in HTML coding.
 * Incidentally you can change the word "column" to "row" and the items will line that way.

Try these out  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.

Check your answers

<< Last Chapter Next Chapter >>