Help:Wiki University Flexbox - Introduction
What is Flexbox?[edit | edit source]
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[edit | edit source]
Formatting ability of Flexbox[edit | edit source]
Below is a sample page layout with three boxes or elements 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.
- Depending on why kind of device you are looking at this lesson, the colored elements 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” element might be under the “MAIN PAGE” element.
- If on a smart phone all the elements might be lined up in a column.
- Either way, Flexbox allows all the boxes to be seen without having to horizontally scroll back and forth to see all of them.
- Try this - If you are on a PC, drag the right edge of the screen back and forth to see the “wrapping” ability of Flexbox.
Flexbox and actual pages[edit | edit source]
Think of each of the colored element as containing an object such as paragraph or text. Another element might contain a picture or a map. Another element 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.