Help:Wiki University Flexbox - Display Vertical





<< Previous 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:column.

Main Page Research Help Wiki Help Get Involved

When would we need

 * What if we want to put a list that is a column inside of one of the boxes that is laid out horizontally?
 * Here is where "flex-direction:column" comes in
 * Lets set the width of our boxes to 200 pixels with no height specified.
 * We will put a column inside of box "Main Page."
 * We will include "flex-wrap:wrap" as well.

 Main Page Item1 Item 2 Item 3 Research Help Wiki Help Get Involved Here is the coding:  Main Page  Item 1 Item 2 Item 3 Research Help Wiki Help Get Involved


 * Everything inside the red box is the nested Flexbox with the items in a column.
 * What we have done here is to place the nested Flexbox inside of box 1 in this example.
 * We have place the listed Flexbox between the opening div tag and the closing div tag of box 1 which is enclosed in a red border.
 * This the same concept as nesting lists which you can learn more about in Wikitext and HTML coding.
 * Incidentally you can change the word "column" to "row" and the items will line up in a row.

Try these out..


 Exercises

1. Make these five items appear in a column without any coding Item 1 Item 2 Item 3 Item 4 Item 5 2. Make the above five items appear in a column with coding. 3. Put the five items in a column and put these five items inside "item 4"

Check your answers

 Quick Quiz

1. you cannot put a column inside a box that is in a row of items A. True B. False 2. You cannot put a Flexbox inside of another Flexbox A. True B. False 3. You cannot put a Flexbox inside of a Flexbox which is inside another Flexbox A. True B. False 4. There is only one way to put items in a column A. True B. False

Check your answers

<< Previous Chapter Next Chapter >>