Help:Wiki University Flexbox - Display Vertical





[[

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 flex-direction:column ?


 * 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 >>

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.

Main Page Research Help Wiki Help Get Involved

When would we need flex-direction:column ?


 * 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

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> 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"

<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. 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

<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

[[ <h2 style="font-size:1.3em; background-color:#fcefcf; padding:3px; margin-top:15px; margin-bottom:15px">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.

Main Page Research Help Wiki Help Get Involved

<h2 style="font-size:1.3em; background-color:#fcefcf; padding:3px; margin-top:15px; margin-bottom:15px">When would we need flex-direction:column ?


 * 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.

<div style="display:flex; flex-wrap:wrap; background-color:lightgray; padding:5px; border:1px solid red; margin-top:15px; margin-bottom:15px"> Main Page Item1 Item 2 Item 3 Research Help Wiki Help Get Involved Here is the coding: <div style=" display:flex"> Main Page <div style="display:flex; flex-direction:column "> 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.

<h2 style="font-size:1.3em; background-color:#fcefcf; padding:0.2em">Try these out

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> 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"

<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. 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

<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]] Next Chapter >>