Help:Wiki University Flexbox - Box Sizes

<< Previous Chapter Next Chapter >>

As you saw in the previous lesson, the individual boxes in Flexbox are only as 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 or fill the width of the page. Here is our next Flexbox coding attribute flex:1. Here we will insert the flex:1 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.
 * NOTICE that the text in the container does not control the size of the boxes.
 * 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 into the individual inline style of each of the boxes, Flexbox determines 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 the number of boxes, which is in this case four, and gives to each box the result. So if there was, say 400 pixels of white space, Flexbox would give each of the four boxes 100 pixels.  Point Two : The another important consideration is that "flex:#" 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 necessarily mean that the box is twice as big as a "flex:1" box. It might be real close but not necessarily the case. </ul>

<h2 style="font-size:2vw; background-color:#fcefcf; padding:3px">Different sized boxes

<p style="font-size:1.3vw">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: <p style="font-size:1.3vw"> <div style=" display:flex;  "> <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 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-size2vw; 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 leave off "flex:#." Main Page Research Help Wiki Help Get Involved


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

Here is the coding: <p style="font-size:1.3vw"> <div style=" display:flex;  "> Main Page <div style=" flex:1 ; background-color:orange">Research Help <div style=" flex:1 ; background-color:red">Wiki Help Get Involved

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

<p style="font-size:1.3vw">Let say you want box 2 to be now be last in the row. To do that here is a new Flexbox attribute: order:#

Main Page Research Help Wiki Help Get Involved Here is the coding: <p style="font-size:1.3vw"> <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 <ul>  NOTICE that we added the order:# to the inline style of each box. The number indicates what position we want the boxes in relation to each other in the row reading from left to right. </li> No cutting and pasting was required.</li> </ul>

<h2 style="font-size:2vw; 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

<p style="font-size:1.3vw">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:12.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

<p style="font-size:1.3vw">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:12.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 >>