Help:Wiki University Flexbox - Box Sizes

<< Previous 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 - flex:#

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


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

Here is the coding:  Main Page Research Help Wiki Help Get Involved An explanation how "flex:1" works :   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 four, and gives each box the result. So if there was say 400 pixels of white space it would, again in this case, give each box 100 pixels.  Point Two : The another 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 as fast as the other boxes if the others were at just the "flex:1: rate."  Point Three : "flex:2" does not mean that the box is twice as big as a "flex:1" box. It might be close but not necessarily the case. 

Different sized boxes

So using "flex:#", you can change the width of individual boxes. 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:  <div style=" flex:1 ; background-color:yellow">Main Page <div style=" flex:2 ; background-color:orange">Research Help <div style=" flex:1 ; background-color:red">Wiki Help <div style=" flex:0.5 ; background-color:#ffd699">Get Involved


 * NOTICE that all that was necessary was to change the flex number in the boxes.
 * NOTICE that no percentages were used although you can use percentages.
 * NOTICE when you shrink the width of the container, the individual boxes shrink at the rate of the flex number.
 * NOTICE again, the boxes are not proportional to the size of each other. Box 2 is not necessarily twice as big as box 1, but pretty close.

<h2 style="font-size1.5vw; background-color:#fcefcf; padding:3px">No sized boxes - flex:0 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: <div style=" display:flex;  "> <div style=" flex:0 ; background-color:yellow">Main Page <div style=" flex:1 ; background-color:orange">Research Help <div style=" flex:1 ; background-color:red">Wiki Help <div style=" flex:0 ; background-color:#ffd699">Get Involved

<h2 style="font-size:1.5vw; background-color:#fcefcf; padding:3px">Order of boxes in a row - order:#

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">Main Page <div style=" flex:2; order:4 ; background-color:orange">Research Help <div style=" flex:1; order:2 ; background-color:red">Wiki Help <div style=" flex:0.5; order:3 ; background-color:#ffd699">Get Involved  <li style="font-size:1.5vw"> NOTICE that we added the order code with a number of the position we wanted the box to be in the row. </li> <li style="font-size:1.2em">No cutting and pasting was required.</li> </ul>

<h2 style="font-size:1.5vw; background-color:#fcefcf; padding:0.2vw">Try these out

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> Exercises

1. Take these five boxes and arrange them in a row with item 4 10 times bigger than the rest Item 1 Item 2 Item 3 Item 4 Item 5 2. Put item 4 and the first item in the row

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

<div style="border-top:1vw solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz

1. You cannot change the size of the items in a row with Flexbox A. True B. False 2. Flex:5 means that the item is 1/5 the size of a flex:1 item. A. True B. False 3. Order:1 means the item is first in the row. A. True B. False

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

<< Previous Chapter Next Chapter >>