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 elements with text.

They are shown on this page as your browser would place them. Notice, by default, they are in a column and each element 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 elements in a row
First illustration of the capabilities of Flexbox coding is the ease of being able to place these four colored elements 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 We think you can see that fewer lines of code are needed than if you used tables with it's rows and cells. The basic steps for coding with Flexbox:
 * NOTICE that the elements are now in a row with only two words of code.
 * NOTICE that the elements are on the left side of the page.
 * NOTICE that the width of the elements are controlled by the content in the boxes.

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

Moving elements around horizontally
What if we want to move the elements to the right side of the horizontal space. Here is the next Flexbox attribute: justify-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 elements are now in a row but to the right edge of the page or container.

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

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

We think you can see that to do any of the above positioning would require floating and maybe exact positioning. This far simpler.
 * NOTICE that the boxes are now together in the middle of the contain or page.
 * NOTICE again that "justify-content:center" is in addition to "display:flex." This coding will not work without "display:flex."

Try these out...


 Exercises

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

Check your answers

 Quick Quiz

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

Check your answers

<< Previous Chapter Next Chapter >>