Help:Wiki University Flexbox - Introduction

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Flexbox/Grids Lessons

What is Flexbox?

Layout possibilities with 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 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.

MAIN PAGE
RESEARCH HELP
WIKI HELP
GET INVOLVED


  • 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

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.


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

Navigation menu