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 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: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 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 Copy and paste these codes for broken links in your sandbox and see if you can fix them: <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
 * 
 * [Missouri, United States Genealogy|Missouri]
 * &lt;a ref="https://en.wikipedia.org/wiki/Main_Page"&gt;Wikipedia&lt;/a&gt;
 * Missouri, United States GenealogyMissouri
 * [Wikipedia]
 * Missouri, United States Genealogy

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz
 * How can links be broken?
 * A. Too many brackets.
 * B. Not enough brackets.
 * C. Wrong kind of brackets.
 * D. No space in an external link between URL and name of link.
 * E. No pipe in an internal link between name of page and name of link.
 * F. Using the URL as the name of the link.
 * G. All of the above.

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