Flexbox Cheatsheet: Difference between revisions

From FamilySearch Wiki
VisualWikitext
mNo edit summary
mNo edit summary
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="display:grid; grid-template-columns:10% 10% 20% 20% 20% 20%">
<div><!--opening table tag for entire document---------------------------------->
<!--------------row 1-------------------------->
  <div style="border:5px solid darkred; border-radius:10px; background:#FFE4B5; width:1170px; 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
<!--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="min-width:1200px; 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:200px; border:1px solid black; font-size:1.2vw; padding:10px">Description</th>
<th style="width:200px; border:1px solid black; font-size:1.2vw; padding:10px">Description</th>
Line 35: Line 11:
<!-----------------------------------display flex - horizontal display--------------------------------------------------------------------->
<!-----------------------------------display flex - horizontal display--------------------------------------------------------------------->
<tr>
<tr>
<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; padding-left:5px">[[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"><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; padding:5px">
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex">
<div style="display:flex">
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 52: Line 28:
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<div style="display:flex; justify-content:flex-end">
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 64: Line 40:
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:center">
<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:yellow; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 76: Line 52:
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:space-between">
<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:yellow; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!---------------------------------------justify-content:space-around----------------------------------------------------->
 
 
 
 
 
 
 
<tr>
<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">[[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>justify-content:space-around</nowiki></td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:flex-end</nowiki></td>
<td style="border:1px solid black; padding:5px">
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:space-around">
<div style="display:flex; justify-content:flex-end">
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!-------------------------------------flex:#--------------------------------------------------->
<tr>
<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">[[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-left:5px"><nowiki>justify-content:flex-end</nowiki></td>
<td style="border:1px solid black; padding:5px">
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex">
<div style="display:flex; justify-content:flex-end">
<div style="flex:1; height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="flex:1; height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="flex:1; height:50px; width:30px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!----------------------------------flex:2------------------------------------------------------>
<tr>
<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">[[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>Different flex numbers</nowiki></td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:flex-end</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">
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<div style="display:flex; justify-content:flex-end">
<div style="flex:0; height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="flex:1; height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="flex:1; height:50px; width:30px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!--------------------------------------------order:#------------------------------------------------------------->
<tr>
<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">[[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>order:#</nowiki></td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:flex-end</nowiki></td>
<td style="border:1px solid black; padding:5px">
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<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="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="flex:1; order:1; height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="flex:1; order:3; height:50px; width:30px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!--------------------------------------flexbox wraping------------------------------------------------>
<tr>
<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">[[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-wrap:wrap</nowiki></td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:flex-end</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">
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<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="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!-------------------------------------------center items both verically and horizontally--------------------------------------------------------->
<tr>
<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">[[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>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-left:5px"><nowiki>justify-content:flex-end</nowiki></td>
<td style="border:1px solid black; padding:5px">
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<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="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:100px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:100px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!-------------------------------------------items at opposite ends------------------------------------------------------------>
<tr>
<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">[[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>White box with flex:6 between items 1 and 2</nowiki></td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:flex-end</nowiki></td>
<td style="border:1px solid black; padding:5px">
<td style="border:1px solid black; padding:5px">
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; justify-content:flex-end">
<div style="display:flex; justify-content:flex-end">
<div style="flex:1; height:50px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="flex:6; height:50px; background-color:white"></div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="flex:1; height:50px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="flex:1; height:50px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
</table>


</table><br>
[[Category:Wikitext Lessons]]
[[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]]

Revision as of 12:47, 27 December 2016

FLEXBOX CHEATSHEET
Condensed guide to Wikitext coding

Click on sort icon to put list in alphabetical order

Description Flex coding You Get
Placing objects in rows 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
Placing objects at end of containers justify-content:flex-end
1
2
3
Placing objects at end of containers justify-content:flex-end
1
2
3
Placing objects at end of containers justify-content:flex-end
1
2
3
Placing objects at end of containers justify-content:flex-end
1
2
3
Placing objects at end of containers justify-content:flex-end
1
2
3
Placing objects at end of containers justify-content:flex-end
1
2
3
Placing objects at end of containers justify-content:flex-end
1
2
3
Retrieved from "https://integration-ru.familysearch.org/en/wiki/index.php?title=Flexbox_Cheatsheet&oldid=2731759"