Help:Wiki University Flexbox - Display Vertical

<< Last 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? <li style="font-size:1.2em">Here is where "flex-direction:column" comes in</li> <li style="font-size:1.2em">Lets increase the width of our boxes to 200 pixels, eliminate the height attribute and put a list inside of box 1.</li> <li style="font-size:1.2em">We will include "flex-wrap:wrap" as well.</li> </ul> Main Page Item1 Item 2 Item 3 Research Help Wiki Help Get Involved Here is the coding: <div style=" display:flex"> Main Page <p style="border:1px solid red; padding:1.5px> <div style="display:flex; flex-direction:column ">  Item 1    Item 2    Item 3    Research Help    Wiki Help    Get Involved    <li style="font-size:1.2em">Everything inside the red box is the nested Flexbox with the items in a column.</li> <li style="font-size:1.2em">What we have done here is to place a nested Flexbox inside of box 1 in this example.</li> <li style="font-size:1.2em">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.</li> <li style="font-size:1.2em">This the same concept as nesting lists which you can learn more about in HTML coding.</li> <li style="font-size:1.2em">Incidentally you can change the word "column" to "row" and the items will line up in a row.</li> </ul>

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

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers << Last Chapter Next Chapter >>