Help:Wiki University Flexbox - Flex Wrapping

<< Previous 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 fit all the fixed width items in a row. Now depending on which kind of device you are viewing this page on, the boxes might not line up in a row as we mentioned in the introduction. The Flexbox element which causes this affect is: flex-wrap:wrap Here is the coding:   Main Page Research Help Wiki Help Get Involved


 * NOTICE that the widths of the boxes are fixed. This attributes only works on with set widths.

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.

This is a very important element! As more and more patrons view the Wiki on devices 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

1. Take these five items and set them to a width of 300 pixels and put in a wrap attribute. Item 1 Item 2 Item 3 Item 4 Item 5 2. Made "item 3" three times larger than the rest, set the width to 250 pixels and then wrap them.

Check your answers

 Quick Quiz

<p style="font-size:1.3vw">1. Wrapping will only happen when flex:# is in the of the code line. A. True B. False 2. When wrapping, the last item will come the first item? A. True B. False 3. When wrapping, the last item will end up on top of the first item? A. True B. False

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

<< Previous Chapter Next Chapter >>