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 horizontal space to fix in the items in a row of a container.

Lets set the width of each box to a fixed number of 230 pixels. No "flex:1" is used. Drag the right side of this page to the left and you will see the boxes disappear. Main Page Research Help Wiki Help Get Involved It would be nice to see the boxes to the left "wrap" or flow down and take up a position under the boxes above. Here is Flexbox element to do that: flex-wrap:wrap Here is the effect as you drag the right edge of this page to the left. Main Page Research Help Wiki Help Get Involved

Here is the coding:  Main Page Research Help Wiki Help Get Involved Suppose you are viewing the page on a smart phone that has a view port of only 800 pixels. Because the total width of the three boxes is 1500 pixels, a scroll bar will appear at the bottom of the screen. It would be better if the three 500 pixel boxes would appear in a column rather than in a row.

Here is our next Flexbox coding element: flex:wrap ."

Here is what the boxes look like when wrapping takes place: 1 2  3
 * NOTICE you now see that all three items are now in a column.

Here is the coding:  1   2    3   Critical - 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
 * Because, in our example, we only have 800 pixels to play with, all three boxes would wrap. You might think that only box 3 would wrap, but since box1 and 2 add up to a 1000 pixels, box 2 will have to wrap as well. The individual items might fit in a row on a PC but not on a tablet or on a smart phone.

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