Help:Wiki University Flexbox - Box Sizes

<< Last Chapter Next Chapter >>



As you saw in the previous lesson, the individual boxes in Flexbox are only wide as the text that is in them. Main Page Research Help Wiki Help Get Involved

Same sized boxes

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. Here we will insert the flex:1 to each box into the inline style for each box. Main Page Research Help Wiki Help Get Involved

Here is the coding:  Main Page Research Help Wiki Help Get Involved 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:

Main Page Research Help Wiki Help Get Involved Here is the coding:  Main Page Research Help Wiki Help Get Involved
 * 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.

No sized boxes What if we do not want one or more of the boxes to change in size? Simply change the flex number to zero: flex:0 Main Page Research Help Wiki Help Get Involved


 * NOTICE the end boxes are whatever size the browser gives them.

Here is the coding:  Main Page <div style=" flex:1 ; background-color:orange; font-size:1.5em; padding:3px">Research Help <div style=" flex:1 ; background-color:red; font-size:1.5em; padding:3px">Wiki Help <div style=" flex:0 ; background-color:PeachPuff; font-size:1.5em; padding:3px">Get Involved

<h2 style="font-size:2.1em">Order of boxes in a row

Let say you want box 2 to be last in the row. To do that here is a new Flexbox attribute: order:1

Main Page Research Help Wiki Help Get Involved Here is the coding: <div style=" display:flex;  "> <div style=" flex:1; order:1 ; background-color:yellow; font-size:1.5em; padding:3px">Main Page <div style=" flex:2; order:4 ; background-color:orange; font-size:1.5em; padding:3px">Research Help <div style=" flex:1; order:2 ; background-color:red; font-size:1.5em; padding:3px">Wiki Help <div style=" flex:0.5; order:3 ; background-color:PeachPuff; font-size:1.5em; padding:3px">Get Involved
 * 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.

<h2 style="font-size:2.1em">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

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