User:Ccsmith/sandbox/wiki

 This user attended RootsTech 2017 in Salt Lake City

Flexbox is basically a program for the layout of pages in the Wiki. It centers and spaces items on a page without percentages, positioning, or tables. Here are a few examples of its capabilities for formatting pages in the Wiki.

two items centered side by side of unequaled width
Here is an example of what would be a major problem in trying to position an image that is a fixed width (as is the case will all images in the Wiki) next to a flexible box of text. Then couple this with trying to place them side by side and center the both of them in the middle of the page. This would be a very difficult to accomplish with positioning or with tables, but is very easy with Flexbox.  Get Involved  Explore all the different ways you can help build the wiki through wiki projects and other local activities. Here is the coding:  Get Involved  Explore all the different ways you can help build the wiki through wiki projects and other local activities.



Creating columns of equal width
Here is all the counties of New Hampshire placed in three columns with no percentages of fixed widths required
 * Belknap
 * Carroll
 * Cheshire
 * Coös

Here is the coding:
 * Grafton
 * Hillsborough
 * Merrimack
 * Rockingham
 * Strafford
 * Sullivan
 * Belknap
 * Carroll
 * Cheshire
 * Coös


 * Grafton
 * Hillsborough
 * Merrimack
 * Rockingham
 * Strafford
 * Sullivan

space around
Main Page Research Help Wiki Help Get Involved Main Page Research Help Wiki Help Get Involved

display flex w/text-align:center
The links above almost line up, but are a little bit different. Space around is equal space between the items, but this arrangement is centered items inside equal wide boxes. Which is better looking is a judgment call.

space between
Main Page Research Help Wiki Help Get Involved

display flex w/flex:1 in each line
Main Page Research Help Wiki Help Get Involved

display flex w/flex:1 and justified-content:center
Main Page Research Help Wiki Help Get Involved

display flex w/text-align:center
Main Page Research Help Wiki Help Get Involved

Flexbox table w/cell widths equal
 Beginning Dates for Major County Records Birth* Marriage Death* Court Land Probate Census 1882 1882  1880  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo mollis turpis in aliquam. Vivamus semper nibh quis dui dapibus pellentesque. Vivamus ultrices enim vitae pretium lacinia. Quisque vestibulum euismod est, a congue velit placerat ut. Aenean blandit feugiat odio, nec sagittis tellus convallis non.

 Birth* Marriage Death* Court Land Probate Census

#|<< Previous Chapter Next Chapter >>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed elementum urna. Ut mollis, justo eget ornare finibus, lorem leo tempus orci, nec tincidunt est sem nec velit. Sed in ligula erat. Sed imperdiet leo vitae neque imperdiet, eu accumsan enim tempor. Nulla lacinia, ex sed placerat rutrum, ligula dui posuere massa, et consectetur dui est ultricies ipsum. Pellentesque turpis ipsum, ultrices et arcu eget, bibendum pretium ante. Etiam fringilla, risus faucibus fringilla ullamcorper, augue lectus cursus metus, nec efficitur ipsum neque ut lectus.

Try these out

 Exercises

Enter exercise questions here

Check your answers

 Quick Quiz

Enter quiz questions here

Check your answers

#|<< Previous Chapter Next Chapter >>

<div style="flex:0; order:2; display:flex; align-items:center; justify-content:center; background: linear-gradient(lightgray, white); min-width:200px; height:30px; border:1px solid black; margin-left:-12px">Get Involved in Wiki <div style="width:22px; height:22px; background:linear-gradient(-225deg, lightgray, white); border-bottom:2px solid black; border-left:2px solid black; transform:rotate(45deg)"> <div style="flex:0; order:4; display:flex; align-items:center; justify-content:center; background: linear-gradient(lightgray, white); margin-left:-10px; min-width:200px; height:30px; border:1px solid black">Help:Wiki Help <div style="width:22px; height:22px; background:linear-gradient(-225deg, lightgray, white); border-bottom:2px solid black; border-left:2px solid black; transform:rotate(45deg)">

Main Page Research Help Wiki Help Get Involved

MAIN PAGE RESEARCH HELP WIKI HELP GET INVOLVED

<div style="width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid black; border-bottom: 10px solid transparent; float:left; margin-right:10px"> m ! 20:06 Gardendale Alabama Family History Center ( diff | hist ).. (+87) .. Rickgwilliams ( talk | contribs | block )  ( Opening Hours and Charges for copying )  [ rollback 1 edit ] ( Tag Visual edit )

<div style="width:0; height: 0; border-top: 10px solid transparent; border-left: 10px solid black; border-bottom: 10px solid transparent; float:left; margin-right:10px"> m ! 19:20 Artical title (dif | hist) . . (+272)  . .  ccsmith (talk | contribs | block) (summary) [rollback 2 edits] ( Tag Visual edit)

MAIN PAGE RESEARCH HELP WIKI HELP GET INVOLVED