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 of positioning, floating, tables, etc which have made the positioning of objects on a page problematic at best. Flexbox uses far fewer lines of code to accomplish what often took many lines to do in the past with positioning, floating, table, etc. But the best benefit is its ability for pages to adapted to whatever devise 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, but you should be able understand this for the most part.'' 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  As you drag the right edge of this page to the left and you should notice that the GET INVOLVED box drops down underneath the MAIN PAGE box. As you continue to move the right edge to the left, the WIKI HELP box now drops to the bottom alongside of the GET INVOLVED box. <li style="font-size:1.2em">If you move the right edge back to the right, the boxes return to their original positions. <li style="font-size:1.2em">As you can see, this page will adapted to whatever view port you are seeing this page and that you don't have to scroll back and forth to see everything. <li style="font-size:1.2em">Assignment, if you have access to a tablet or smart phone, bring up this page to see how it looks on the view port of either devise.

<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 can see all the stuff on this page on your smart phone just as you see it here?

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

A. On the right of TOC. B. Under the MAIN PAGE. C. Under the TOC. D. None of the above.
 * Where might you see the SIDEBAR on your smart phone?

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

<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

Next Chapter >>