Help:Wiki University Flexbox - Introduction

#|<< Previous Chapter 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 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 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  <li style="font-size:1.2vw">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 style="font-size:1.2vw">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.2vw">If you move the right edge back to the right, the boxes return to their original positions. <li style="font-size:1.2vw">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.2vw">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:1.5vw; background-color:#fcefcf; padding:0.2vw">Try these out

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> Exercises

1. Take these five boxes and arrange them in a row with even spaces between: Item 1 Item 2 Item 3 Item 4 Item 5 2. Place these five boxes using the space around attribute

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

<div style="border-top:1vw solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> <div style="font-size:1.2vw; width:100%; height:30px; vertical-align:middle; background-color:lightgray; ">Quick Quiz

1. To put even spaces between boxes and no spaces at each end, you use "justify-content:space-around". 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

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

#|<< Previous Chapter Next Chapter >>