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

IMPORTANT  This is a very important element! As more and more small format devises such as smart phones visit the Wiki, it is necessary that our pages will adapt to their view ports. Always be thinking about the size of the view ports with which that our patrons will be looking at our pages in the Wiki. This will be a much used attribute. Try these out  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.

Check your answers << Last Chapter Next Chapter >>