FamilySearch Wiki

Flexbox Cheatsheet: Difference between revisions

VisualWikitext
mNo edit summary
mNo edit summary
 
(29 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<div><!--opening table tag for entire document---------------------------------->
<div style="display:grid; grid-template-columns:10% 10% 20% 20% 20% 20%">
  <div style="border:5px solid darkred; border-radius:10px; background:#FFE4B5; width:870px; height:100%; text-align:center; padding:10px; margin-bottom:10px; box-shadow:5px 5px 3px #888888"><span style="font-size:36px; font-family:arial; padding:10px">FLEXBOX CHEATSHEET</span><br>Condensed guide to Wikitext coding
<!--------------row 1-------------------------->
<!--tool bar--------------------------------------------------->
{{HTML School}}
<!----------------row 2---------------------------->
<!-------------------menu-------------------------------->
<div style="grid-column:1/3; background-color:#FFEDCC; box-shadow:1px 1px 5px #888888">{{Wiki Flexbox Sidebar}}</div>
<!-----------------------main------------------------>
<!-------------------------------chapters top row---------------------------------->
<div style="grid-column:3/8; padding-left:0.5em">
<!-------------------------------chapters top row---------------------------------->
 
<div style="margin-left:0.5em">
<!-----------------------MAIN MATERIAL BELOW THIS LINE-------------------------------------------->
<!--opening table tag for entire document---------------------------------->
 
  <div style="text-align:center; border:5px solid darkred; border-radius:10px; background:#FFE4B5; padding:10px; margin-bottom:10px; box-shadow:5px 5px 3px #888888"><span style="font-size:36px; font-family:arial; padding:10px">FLEXBOX CHEATSHEET</span><br>Condensed guide to Wikitext coding
''Click on sort icon to put list in alphabetical order''
''Click on sort icon to put list in alphabetical order''
</div>  
</div>  
<table style="width:900px; border:2px solid green" class="sortable">
 
*REMEMBER: All Flexbox coding of items requires that they are inside of a container, such as a "div" or "p" tag: <br>
<div style="border:2px solid green; padding:3px">
<nowiki><div style="display:flex"></nowiki><br>
<nowiki><div>Item 1</div></nowiki><br>
<nowiki><div>Item 2</div></nowiki><br>
<nowiki><div>Item 3</div></nowiki><br>
<nowiki></div></nowiki></div>
[[Help:Wiki University Flexbox - Introduction|Back to Flexbox Lessons]]
<table style="max-width:1200px; border:2px solid green" class="sortable">
<tr style="background:#FFE4B5">
<tr style="background:#FFE4B5">
<th style="width:150px; border:1px solid black; font-size:18px; padding:10px">Description</th>
<th style="width:200px; border:1px solid black; font-size:1.2vw; padding:10px">Description</th>
<th style="width:50%; border:1px solid black; font-size:18px; padding:10px">Flex coding</th>
<th style="width:200px; border:1px solid black; font-size:1.2vw; padding:10px">Flex coding</th>
<th style="border:1px solid black; font-size:18px; padding:10px">You Get</th>
<th style="border:1px solid black; font-size:1.2vw; padding:10px">You Get</th>
</tr>
</tr>
<!-----------------------------------display flex - horizontal display--------------------------------------------------------------------->
<tr>
<tr>
<td style="border:1px solid black">[[Help:Wiki University Flexbox - Display Horizontal#Placing objects in a row|Placing objects in rows]]</td>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Placing objects in a row|Making all items the same size]]</td>
<td style="border:1px solid black"><nowiki>display:flex</nowiki></td>
<td style="border:1px solid black; padding-left:5px"><nowiki>display:flex</nowiki></td>
<td style="border:1px solid black"><div style="display:flex">
<td style="border:1px solid black; padding:5px">
<div style="height:50px; width:30px; background-color:yellow; text-align:center; font-size:2em">1</div>
<div style="border:2px solid red; padding:2px">
<div style="height:50px; width:30px; background-color:orange; text-align:center; font-size:2em">2</div>
<div style="display:flex">
<div style="height:50px; width:30px; background-color:red; text-align:center; font-size:2em">3</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
</div></td>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</tr>
</tr>
<!-------------------------------------justify-content:flex-end---------------------------------------------------------->
<tr>
<tr>
<td style="border:1px solid black">[[Help:Wiki University Wikitext--Lists#Unordered_Lists|Lists - unordered]]
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Placing objects at end of containers]]</td>
<td style="border:1px solid black"><nowiki>*Item one</nowiki><br><nowiki>*Item two</nowiki><br><nowiki>*Item three</nowiki>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:flex-end</nowiki></td>
<td style="border:1px solid black">
<td style="border:1px solid black; padding:5px">
*Item one
<div style="border:2px solid red; padding:2px">
*Item two
<div style="display:flex; justify-content:flex-end">
*item three
<div style="height:50px; width:30px; background-color:yellow">1</div>
</td></tr></table>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</tr>
<!---------------------------------------justify-content:center----------------------------------------------------------->
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Placing objects in the center of containers]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:center</nowiki></td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:center">
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</tr>
<!---------------------------------------justify-content:space-between------------------------------------------------->
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Placing objects evenly spaced across a containter]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:space-between</nowiki></td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:space-between">
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</tr>
<!---------------------------------------justify-content:space-around----------------------------------------------------->
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Evenly spacing objects with space on either end]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:space-around</nowiki></td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:space-around">
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</tr>
<!-------------------------------------flex:#--------------------------------------------------->
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Placing objects at end of containers]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>flex:#</nowiki></td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex">
<div style="flex:1; height:50px; width:30px; background-color:yellow">1</div>
<div style="flex:1; height:50px; width:30px; background-color:orange">2</div>
<div style="flex:1; height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</tr>
<!----------------------------------flex:2------------------------------------------------------>
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Controlling size of flex items]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>Different flex numbers</nowiki></td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex">
<div style="flex:1; height:50px; width:30px; background-color:yellow">1</div>
<div style="flex:2; height:50px; width:30px; background-color:orange">2</div>
<div style="flex:1; height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</tr>
<!-------------------------------------------flex:0------------------------------------------------->
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|flex zero]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>Box one with flex number zero</nowiki></td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<div style="flex:0; height:50px; width:30px; background-color:yellow">1</div>
<div style="flex:1; height:50px; width:30px; background-color:orange">2</div>
<div style="flex:1; height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</tr>
<!--------------------------------------------order:#------------------------------------------------------------->
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Change order in row]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>order:#</nowiki></td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<div style="flex:1; order:2; height:50px; width:30px; background-color:yellow">1</div>
<div style="flex:1; order:1; height:50px; width:30px; background-color:orange">2</div>
<div style="flex:1; order:3; height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</tr>
<!--------------------------------------flexbox wraping------------------------------------------------>
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Wrapping boxes in limited space]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>flex-wrap:wrap</nowiki></td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; flex-wrap:wrap">
<div style="height:20px; width:300px; background-color:yellow">1</div>
<div style="height:20px; width:300px; background-color:orange">2</div>
<div style="height:20px; width:300px; background-color:red">3</div>
</div></div></td>
</tr>
<!------------------------------------------flex-direction:column----------------------------------------------->
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Placing objects in a column]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>flex-direction:column</nowiki></td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; flex-direction:column">
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</tr>
<!-------------------------------------------justify-content:center------------------------------------------------>
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Centering horizontally]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>display;flex; justify-content:center</nowiki><br>''<nowiki>Centering text or images inside an item horizontally.</nowiki>''</td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex">
<div style="display:flex; justify-content:center; height:50px; width:100px; background-color:yellow">1</div>
<div style="display:flex; justify-content:center; height:50px; width:100px; background-color:orange">2</div>
<div style="display:flex; justify-content:center; height:50px; width:100px; background-color:red">3</div>
</div></div></td>
</tr>
<!-------------------------------------------align-items:center--------------------------------------------------------->
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Centering vertically]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>display:flex; align-items:center</nowiki><br>''<nowiki>Center text or image inside an item vertically. </nowiki>''</td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:yellow">1</div>
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:orange">2</div>
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:red">3</div>
</div></div></td>
</tr>
<!-------------------------------------------center items both verically and horizontally--------------------------------------------------------->
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Centering vertically & Horizontally]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>display:flex; justify-content:center; align-items:center</nowiki><br>''<nowiki>Center text or image inside an item both horizonatly and vertically at the same time. </nowiki>''</td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:100px; background-color:yellow">1</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:100px; background-color:orange">2</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:100px; background-color:red">3</div>
</div></div></td>
</tr>
<!-------------------------------------------items at opposite ends------------------------------------------------------------>
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Placing objects at opposite ends of containers]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>White box with flex:6 between items 1 and 2</nowiki></td>
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<div style="flex:1; height:50px; background-color:yellow">1</div>
<div style="flex:6; height:50px; background-color:white"></div>
<div style="flex:1; height:50px; background-color:orange">2</div>
<div style="flex:1; height:50px; background-color:red">3</div>
</div></div></td>
</tr>
 
</table><br>
[[Help:Wiki University Flexbox - Introduction|Back to Flexbox Lessons]]
<!---------------------------------END OF MATERIAL------------------------------------------->
</div>
<!-------------------------------chapters bottom---------------------------------------------------->
<div style="clear:both"></div>
 
</div>
__NOTOC__
[[Category:Wiki Lessons]]

Latest revision as of 09:29, 27 February 2018

FLEXBOX CHEATSHEET
Condensed guide to Wikitext coding

Click on sort icon to put list in alphabetical order

  • REMEMBER: All Flexbox coding of items requires that they are inside of a container, such as a "div" or "p" tag:

<div style="display:flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>

</div>

Back to Flexbox Lessons

Description Flex coding You Get
Making all items the same size display:flex
1
2
3
Placing objects at end of containers justify-content:flex-end
1
2
3
Placing objects in the center of containers justify-content:center
1
2
3
Placing objects evenly spaced across a containter justify-content:space-between
1
2
3
Evenly spacing objects with space on either end justify-content:space-around
1
2
3
Placing objects at end of containers flex:#
1
2
3
Controlling size of flex items Different flex numbers
1
2
3
flex zero Box one with flex number zero
1
2
3
Change order in row order:#
1
2
3
Wrapping boxes in limited space flex-wrap:wrap
1
2
3
Placing objects in a column flex-direction:column
1
2
3
Centering horizontally display;flex; justify-content:center
Centering text or images inside an item horizontally.
1
2
3
Centering vertically display:flex; align-items:center
Center text or image inside an item vertically.
1
2
3
Centering vertically & Horizontally display:flex; justify-content:center; align-items:center
Center text or image inside an item both horizonatly and vertically at the same time.
1
2
3
Placing objects at opposite ends of containers White box with flex:6 between items 1 and 2
1
2
3

Back to Flexbox Lessons

Retrieved from "https://integration-ru.familysearch.org/en/wiki/index.php?title=Flexbox_Cheatsheet&oldid=3143816"