Help:Wiki University Flexbox - Display Horizontal

<< Last 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. 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   NOTICE that the boxes are now in a row with only two words of code.  NOTICE that the boxes are on the left end of the container We have placed a red border around the boxes so you can see the relationship between the boxes and their container.  Here is the coding:  Main Page Research Help Wiki Help Get Involved

<h2 style="font-size:2em; background-color:#fcefcf; padding:3px">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  <li style="font-size:1.2em"> NOTICE that the boxes are now in a row but to the right edge of the page or container. </li> NOTICE that the width of the boxes are controlled by the content in the boxes. </li> </ul> Here is the coding: <div style=" display:flex ; justify-content:flex-center  "> Main Page Research Help Wiki Help Get Involved

<h2 style="font-size:2em; background-color:#fcefcf; padding:3px">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  <li style="font-size:1.2em"> NOTICE that the boxes are now together in the middle of the contain or page.</li> </ul> Here is the coding: <div style=" display:flex; justify-content:center  "> Main Page Research Help Wiki Help Get Involved

<h2 style="font-size:2em; background-color:#fcefcf; padding:3px">Creating space between boxes - justify-content:space-between

What if we want to move the boxes so there is an even amount of space between the boxes such as we might see in tool lines.
 * Here is the next Flexbox attribute: flex-content:space-between.

Main Page Research Help Wiki Help Get Involved  <li style="font-size:1.2em"> NOTICE that the boxes have the same amount of space between the two end boxes and the middle box.</li> </ul>

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

<h2 style="font-size:2em; background-color:#fcefcf; padding:3px">Creating spaces around boxes - justify-content:space-around

What if we want to move the boxes so that there is a small amount of space between the end boxes and the edge of the container. Here is the next Flexbox attribute: flex-content:space-around.

Main Page Research Help Wiki Help Get Involved Here is the coding: <div style=" display:flex; justify-content:space-around  "> Main Page Research Help Wiki Help Get Involved  <li style="font-size:1.2em"> NOTICE that the end boxes are in from the edge of the container by the amount equal to one half of the space between the boxes.</li> </ul>

<h2 style="font-size:2em; background-color:#fcefcf; padding:3px">Try these out <div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"> Quick Quiz

A. True B. False
 * You browser, by default, naturally puts all items on a page in a row.

A. True B. False
 * To put items in a row, you only need the coding "flex-content:center" in the opening div tag.

A. True B. False
 * To put space between the first and last item and the edge of the container, you use "flex-content:space-between."

A. True B. False
 * The reason for Flexbox is to allow a page to be seem more easily on a tablet.

A. True B. False
 * To put items in a column, you have to use "display:flex" in the opening div tag.

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px;">Check your answers << Last Chapter Next Chapter >>