Help:Wiki University Flexbox - Box Sizes

<< Last Chapter Next Chapter >>



If we remove the width attribute to the boxes but keep the display:flex, we get this result: 1 2  3

As you can see the individual boxes are only wide as the text that is in them. What if we want the boxes to be of equal size and fill up the entire container. Here is our next Flexbox coding attribute flex:1.

Same sized boxes Here we will insert the flex:1 to each box into the inline style for each box. 1 2  3 Here is the coding: 1 2 3 An explanation how "flex:1 works, so pay close attention:
 * 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.
 * Point One: When "flex:1 is placed in the individual boxes, what flex box does is find out how much white space is between the last box and the edge of the container. Depending on how many boxes there are, Flexbox divides up the space by, in this case three, and gives each box the result.  So if there was 900 pixels of white space it would, again in this case, give each box 300 pixels.
 * Point Two: The other important consideration is that "flex:1" tells us at what rate a box will expand or shrink depending on the view-port of your devise. If the flex was "flex:2" the box would get twice as much of the white space and would expand or shrink at twice the rate as the other boxes if the others were at just the "flex:1: rate."
 * Point Three: "flex:2" doesn't mean that the box is twice as big as the other boxes,  It might be close but not necessarily the case.

Different sized boxes

So using "flex", let say you need the boxes in different sizes. Maybe box 2 you want twice a big as box 1 and box 3 is half the size of box 1. In other words, you want it to look like this:

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.
 * Notice, no percentages were used.
 * When you shrink the width of the container, the individual boxes shrink at the rate of the flex number.
 * Again to note: the boxes are not proportional to the size of each other. Box 2 is not necessarily twice as big as box 1, but close enough.

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  What if we do not want an item to fluctuate in width but be a set amount.
 * 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.
 * Here we will set flex to zero or "flex:0."
 * If we use flex:1 or so on the others, they will fluctuate to fill the space available, but the flex:0 will not.

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.

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