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 each box to the width of 500 pixels. Here is the coding:  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.

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. What happened was the boxes filled up the available width and could not achieve the full 500 pixel width. 1 2  3

What we would like to happen is for box 3 to move or wrap around boxes 1 and 2 and appear underneath box 1. 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
 * 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.

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