Help:Wiki University Flexbox - Display Horizontal

<

To see how the elements in CCS3 Flexbox works, 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

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
 * 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. Here is the coding.
 * NOTICE that the coding for the boxes are between the opening div tag and the ending div tag.

Here's how they look now after being put into a div tag container. 1 2  3  1  2  3 Here is the coding:  1   2    3
 * As you can see nothing happened, it looks just like the way the browser placed them
 * But see what happens when we put in the code " display:flex " in the inline styling code.


 * NOTICE that the boxes are now in a row with only two words of code. We don't has 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.

Same sized boxes We will now remove the width from each box or the children and add flex:1 to each of the children or boxes and see what happens.

1 2  3 Here is the coding:
 * NOTICE the boxes are all the same size and fill up to the end of the container.
 * No percentages were needed to make all the widths the same.

1 2 3

Different sized boxes

Let say you need the boxes in different sizes. Let say you want box 2 to be twice a big as box 1 and box 3 to be half the size of box 1.

1 2  3

Here is the coding:

1 2 3


 * NOTICE that all that was necessary was to change the flex number in the boxes.
 * Again no percentages were used.
 * When you shrink the width of the container, the individual boxes shrink at the rate of the flex number.

Order of boxes in a row

Let say you want to change the order of the boxes. Let say you want box 2 to be first and box 3 to be second in the row and box 1 to be last. To do that here is a new Flexbox attribute: order:1

1 2  3

Here is the coding:

1 2 3

Try these out <div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"> Quick Quiz
 * NOTICE that we added the order code with a number of the position we wanted the box to be in the row.
 * No cutting and pasting was required.

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.

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px;">Check your answers

<<Last Chapter Next Chapter &gt;&gt;