Help:Wiki University Flexbox - Display Vertical

<< Previous Chapter Next Chapter >>

Flex-Direction - flex-direction:column


 * 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.
 * The widths have been set to 200 pixels for illustration: flex-direction:column.
 * So why would need flex-direction:column? 

Main Page Research Help Wiki Help Get Involved


 * 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 increase the width of our boxes to 200 pixels, eliminate the height attribute and put a list inside of box 1.
 * 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 a 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 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 >>