Help:Wiki University Flexbox - Display Vertical

<< Last Chapter Next Chapter >>



Flex-Direction


 * 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.
 * Using this attribute, the result is the same as if the browser was controlling the placement as shown to the left.
 * So why would need flex-direction:column?

1 2  3

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.
 * What we have done here is to place a nested flex box inside of an item which is part of the row of items in this example.
 * We have place the listed flexbox between the opening div tag of item 1 and the closing div tag of item on which is shown in red.
 * 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 >>