Help:Wiki University Flexbox - Introduction

Next Chapter >>

What is Flexbox?

Flexbox is a group of CSS3 coding elements that enables you to place objects on a page without having to use positioning, floating, tables, etc.


 * Flexbox was developed in 2009 to overcome the limitations inherit in positioning, floating, tables, etc.
 * Flexbox uses far fewer lines of code to accomplish the same formatting.
 * But the best benefit is its ability for pages to adapt to whatever device you are viewing the page, whether it be on a PC or tablet or smart phone.

What do you have to know to code with Flexbox

*We will assume that you have gone through the Wikitext course. It would be even better if you have gone through the HTML course as well. Formatting ability of Flexbox Below is a sample page layout with three boxes with various heights and widths programmed in Flexbox. By moving the right edge of this page you can see how it adapts to the various view ports that could possibility be looking at this page.

MAIN PAGE RESEARCH HELP WIKI HELP GET INVOLVED


 * Depending on why kind of device you are looking at this lesson, the colored boxes might be in different positions on the page.
 * If on a Desk Top or PC, the boxes should be in a line across the page.
 * If on a tablet, the “GET INVOLVED” box might be under the “MAIN PAGE” box.
 * If on a smart phone all the boxes might be lined up in a column.
 * Either way, Flexbox allows all the boxes to be seen without having to scroll to see all of them.
 * Try this - If you are on a PC, drag the right edge of the screen and watch the various color boxes move to various positions to see the “wrapping” ability of Flexbox.

Flexbox and actual pages Think of each of the colored boxes as containing an element of a wiki page. One box might contain a paragraph or two of text. Another box might contain a picture or map. Another box might contain a table. With Flexbox, your text, illustrations, maps and tables will remain organized in the order you choose, no matter the screen size of the device they are viewed on.

Try these out

 Quick Quiz

1. You can see all the stuff on this page on your smart phone just as you see it here? A. True B. False

2. When viewing this page on your smart phone, you do not have to scroll to see all the width? A. True B. False

3. Where might you see the "Get Involved" on your smart phone? A. On the right of "Main Page." B. Under "Main Page." C. Under "Wiki Help." D. None of the above.

4. One of the reasons for Flexbox is to allow a page to be seen more easily on a tablet without scroll bars. A. True B. False

Check your answers

Next Chapter >>