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

Different sized boxes By changing the number in "flex:#", you can change the width of individual boxes. Maybe you want "Research Help" to be twice a big as "Main Page" and "Get Involved" to be half the size of "Main Page. Here is the coding:    Main Page    Research Help    Wiki Help    Get Involved   Here is the result: Main Page  Research Help  Wiki Help  Get Involved
 * NOTICE that all that was necessary was to change the flex number in the boxes.

<h2 style="font-size2em; 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:#." Here is the coding: <p style="font-size:1.3em"> <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 Here is the result: Main Page Research Help Wiki Help Get Involved
 * NOTICE that "flex:#" is missing from "Main Page" and "Get Involved."
 * NOTICE the end boxes are whatever size the browser gives them.

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

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

Here is the result:
 * 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.
 * No cutting and pasting was required.

Main Page Research Help Wiki Help Get Involved

<h2 style="font-size:2em; background-color:#fcefcf; padding:0.2em">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.3em">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.5em; height:30px; padding-top:3px; padding-left:1em; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

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

<p style="font-size:1.3em">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.5em; height:30px; padding-top:3px; padding-left:1em; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<< Previous Chapter Next Chapter >>