Help:Wiki University Flexbox - Display Horizontal

<< Previous Chapter Next Chapter >>

Browser placement To see how the elements can adapt to any devise using CCS3 Flexbox, we will use the following example as an illustration. Here are four color boxes with text. NOTICE: All units of measurements will be in "vw" units rather than pixels. See explanation for use of "vw" units

They are shown on this page as your browser would place them. Notice, by default, they are in a column. Main Page Research Help Wiki Help Get Involved

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.  Step one - We need to place these four boxes into a  tag container. Consider the div tag container as the parent and the boxes as the children of the parent. Step two - We will next add the first Flexbox coding to the inline styling of the opening div tag to have the color boxes line in a row:   Main Page Research Help Wiki Help Get Involved '' A red border is in place around the boxes so you can see the relationship between the boxes and their container. ''   NOTICE that the boxes are on the left end of the container  NOTICE that the width of the boxes are controlled by the content in the boxes.  </ul>

Here is the coding: <div style=" display:flex  "> Main Page Research Help Wiki Help Get Involved


 * NOTICE that the boxes are now in a row with only two words of code.</li>

<h2 style="font-size:2vw; background-color:#fcefcf; padding:0.2vw">Moving boxes around horizontally - justify-content:flex-end <p style="font-size:1.3vw">What if we want to move the boxes to the right side of the horizontal space. <p style="font-size:1.3vw">Here is the next Flexbox attribute: flex-content:flex-end.

<div style="display:flex; justify-content:flex-end; border:2px solid red; background-color:lightgray; padding:5px"> Main Page Research Help Wiki Help Get Involved

Here is the coding: <div style=" display:flex ; justify-content:flex-end  "> Main Page Research Help Wiki Help Get Involved
 * NOTICE that the boxes are now in a row but to the right edge of the page or container.

<h2 style="background-color:#fcefcf; padding:0.2vw; font-size:2vw">Moving boxes to the middle - justify-content:center

<p style="font-size:1.3vw">What if we want to move the boxes to the middle of the horizontal space. <p style="font-size:1.3vw">Here is the next Flexbox attribute: flex-content:center.

<div style="display:flex; justify-content:center; border:2px solid red; background-color:lightgray; padding:5px"> Main Page Research Help Wiki Help Get Involved


 * NOTICE that the boxes are now together in the middle of the contain or page.</li>

Here is the coding: <div style=" display:flex; justify-content:center  "> Main Page Research Help Wiki Help Get Involved

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