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:


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

Moving boxes around horizontally

What if we want to move the boxes to the right side of the horizontal space.
 * Here is the next Flexbox attribute: flex-content:flex-end.

1 2  3 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.

Moving boxes to the middle

What if we want to move the boxes to the middle of the horizontal space.
 * Here is the next Flexbox attribute: flex-content:center.

1 2  3 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.

Moving boxes to the middle

What if we want to move the boxes to the middle of the horizontal space.
 * Here is the next Flexbox attribute: flex-content:center.

1 2  3 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.

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