Help:Wiki University Flexbox - Display Horizontal

<< Previous Chapter Next Chapter >>

Browser placement To see how the elements can adapt to any device using Flexbox, we will use the following example as an illustration. Here are four color boxes with text.

They are shown on this page as your browser would place them. Notice, by default, they are in a column and each item stretches across the entire width of the page regardless of how much text is in them. Again this is by default of your browser. Main Page Research Help Wiki Help Get Involved This is what your original coding would look like: Main Page Research Help Wiki Help Get Involved
 * NOTICE that no width was set for each item. The browser set the width to the entire width of the page by default.

Placing objects in a row - display:flex First illustration of the capabilities of Flexbox coding is the ease of being able to place these four colored boxes in a row. 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 the boxes are now in a row with only two words of code.
 * NOTICE that the boxes are on the left side of the page.
 * NOTICE that the width of the boxes are controlled by the content in the boxes.

The basic steps for coding with Flexbox:

'' On our examples we will use a red border with a gray background so you can see the relationship between the container and the items inside. ''
 * First step is to place items INSIDE an opening and closing DIV tag.
 * This creates a container.
 * It is in this "container" tag we place the Flexbox coding that affects the arrangement of the items inside of the container.
 * Second step is to add the Flexbox coding to the "container" div tag with inline styling code.

Moving boxes around horizontally - justify-content:flex-end What if we want to move the boxes to the right side of the horizontal space. Here is the next Flexbox attribute: flex-content:flex-end.

 Main Page Research Help Wiki Help Get Involved Here is the result:  Main Page Research Help Wiki Help Get Involved
 * NOTICE that "justify-content:flex-end" is in addition to "display:flex." This coding will not work without "display:flex."


 * NOTICE that the boxes are now in a row but to the right edge of the page or container.

Moving boxes to the middle - justify-content:center

What if we want to move the boxes to the middle of the horizontal space. Here is the next Flexbox attribute: flex-content:center.

 Main Page Research Help Wiki Help Get Involved Here is the result:  Main Page Research Help Wiki Help Get Involved


 * NOTICE that the boxes are now together in the middle of the contain or page.</li>
 * NOTICE again that "justify-content:center" is in addition to "display:flex." This coding will not work without "display:flex."

<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: Item 1 Item 2 Item 3 Item 4 Item 5 2. Place these five boxes so they are in the middle of the page. 3. Place them on the right side of the page

<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. To put items at the beginning of a row, you need to use "justify-content:left-end"?. A. True B. False 2. To place items in the middle of a page you need to use you use: "justify-content:middle?" A. True B. False 3. To place items on the right side of a page you need to use "justify-content:right-end?" 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 >>