Help:Wiki University Flexbox - Display Horizontal

<< Last Chapter Next Chapter >>



Browser settings 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, by default, they are in a column. Main Page Research Help Wiki Help Get Involved Here is the coding:

Main Page Research Help Wiki Help Get Involved

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. Main Page Research Help Wiki Help Get Involved Here is the coding:  Main Page Research Help Wiki Help Get Involved
 * 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.
 * Step two - We will next add the first Flexbox coding to the inline styling of the opening 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 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 but to the right edge of the page or container.

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 together in the middle of the contain or page.

Creating space between boxes

What if we want to move the boxes so there is an even amount of space between the boxes such as we might see in tool lines.
 * Here is the next Flexbox attribute: flex-content:space-between.

1 2  3 Here is the coding:  1   2    3


 * NOTICE that the boxes have the same amount of space between the two end boxes and the middle box.

Creating spaces around boxes

What if we want to move the boxes so that there is a small amount of space between the end boxes and the edge of the container.
 * Here is the next Flexbox attribute: flex-content:space-around.

1 2  3 Here is the coding:  1   2    3


 * NOTICE that the end boxes are in from the edge of the container by the amount equal to one half of the space between the boxes.

Try these out  Quick Quiz

A. True B. False
 * You browser, by default, naturally puts all items on a page in a row.

A. True B. False
 * To put items in a row, you only need the coding "flex-content:center" in the opening div tag.

A. True B. False
 * To put space between the first and last item and the edge of the container, you use "flex-content:space-between."

A. True B. False
 * The reason for Flexbox is to allow a page to be seem more easily on a tablet.

A. True B. False
 * To put items in a column, you have to use "display:flex" in the opening div tag.

Check your answers

<< Last Chapter Next Chapter >>