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:column.  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?   MAIN PAGE RESEARCH HELP WIKI HELP GET INVOLVED  What if we want to put a list inside of one of the boxes that is laid out horizontally?</li> <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:3px> <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 lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"> 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.

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