Help:Wiki University Flexbox - Flex Wrapping

<< Last Chapter Next Chapter >>



Flex wrapping

Here is one of the real beauties of Flexbox, the ability to "wrap" when there is not enough space to fix in the items in a row of a container. Lets change the width of each box to 500 pixels. Here is the coding:

 1   2    3

We have limited the page width to 1200 pixels. However the boxes are, as you can see, 500 pixels each. This means that the combined width of the boxes is 1500 pixels. That's 300 pixels more than the available width. 1 2  3  Obviously, when the page is loaded the individual boxes will line up in a row and start pushing anything on either side of it out of the way. Here is our next Flexbox coding element: Flex wrap.

What we would like to happen is for box 3 to move or wrap around boxes 1 and 2 and appear underneath box 1. Here is what the row looks like when wrapping takes place: 1 2  3 Here is the coding:  1   2    3
 * NOTICE you now see that item 3 has dropped below 1 item and is its full width as are items 1 and 2. This will be a much used attribute.

Again flex-wrap allows us to be able to place many items in a row regardless of size and have the individual item start stacking on top of each other if there is not enough room horizontally to fix them all in a row. The individual items might fix in a row on a PC but not on a smart phone. However with flex-wrap the coding simply moves items under each other so they will fix on a smart phone and illuminate the need for a scroll bar below. Know this attribute well.

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