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 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.</li> <li style="font-size:1.3vw">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> <li style="font-size:1.3vw">If you move the right edge back to the right, the boxes return to their original positions. <li style="font-size:1.3vw">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> <li style="font-size:1.3vw">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.</li> </ul>

<h2 style="font-size:2vw; background-color:#fcefcf; padding:0.2vw">Try these out

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

<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

Next Chapter >>