Help:Wiki University Flexbox - Flex Wrapping

<< Last Chapter Next Chapter >>

Flex wrapping - flex-wrap:wrap

Here is one of the real beauties of Flexbox, the ability to "wrap" when there is not enough horizontal space to fix all the items in a row in a container. Here is a Flexbox element to do that: flex-wrap:wrap

To see the effect, drag the right edge of this page to the left.

Main Page Research Help Wiki Help Get Involved You will see the boxes begin to stack under each other as the width decreases. Here is the coding:  Main Page Research Help Wiki Help Get Involved

This is a very important element! As more and more patrons view the Wiki on devise such as "smart phones or "tablets," it is necessary that our pages will be able to adapt to their view ports. Always keep in mind how your coding will appear on smaller view ports.  This will be a much used attribute. Try these out

 Exercises Copy and paste these codes for broken links in your sandbox and see if you can fix them: 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

 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.

Check your answers << Last Chapter Next Chapter >>