Help:Wiki University Flexbox - Display Horizontal

<< Last Chapter Next Chapter >>



To see how the elements can adapt to any devise using CCS3 Flexbox, we will use the following example as an illustration. Here are three 100 square pixels colored boxes. They are shown on this page as your browser would place them. Notice they are in a column. 1 2  3 Here is the coding: 1   2    3

Placing objects in a row First illustration of Flexbox coding is the ease of being able to place these three colored boxes in a row. 1 2  3 Here is the coding:  1   2    3
 * Step one - We need to place these three boxes into a  tag container.  Consider the container as the parent and the boxes as the children of the parent.
 * We will next add the first Flexbox coding to the inline styling of a div tag to have the color boxes line in a row:

Oversized boxes Lets change the width to 500 pixels for each of our boxes. 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 is 300 pixels more than the available width. What happened was the boxes filled up the available width and no more. 1 2  3
 * NOTICE that the boxes are now in a row with only two words of code. We don't have to use blocking or floating attributes.
 * We have placed the boxes or children inside a red border so you can see the relationship between the boxes and the edges of the page.

What we would like to happen is for the last boxes to move or wrap around the boxes that will fix the available space as we see when using "floating" attributes. Flex wraping 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. Here is what the row looks like when wrapping takes place: 1 2  3

Here is the coding:  1   2    3

You can see that the item 3 has dropped below the 1 item and is now is its full width as are items 1 and 2. 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 >>