Flexbox Cheatsheet: Difference between revisions

From FamilySearch Wiki
VisualWikitext
mNo edit summary
mNo edit summary
(16 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%; 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>  
*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">
<table style="max-width:1200px; border:2px solid green" class="sortable">
<tr style="background:#FFE4B5">
<tr style="background:#FFE4B5">
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">
Line 107: Line 83:
<!----------------------------------flex:2------------------------------------------------------>
<!----------------------------------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|Different flex numbers]]</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>Different flex numbers</nowiki></td>
<td style="border:1px solid black; padding:5px">
<td style="border:1px solid black; padding:5px">
Line 141: Line 117:
</div></div></td>
</div></div></td>
</tr>
</tr>
<!--------------------------------------flexbox wraping------------------------------------------------>
<1--------------------------------------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|Wrapping boxes in limited space]]</td>
Line 167: Line 143:
<!-------------------------------------------justify-content:center------------------------------------------------>
<!-------------------------------------------justify-content:center------------------------------------------------>
<tr>
<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">[[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</nowiki><br>''<nowiki>Centering text or images inside an item horizontally.</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; justify-content:flex-end">
<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>
<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>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; justify-content:flex-end">
<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>
<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>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="display:flex; justify-content:center; height:50px; width:100px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="display:flex; justify-content:center; height:50px; width:100px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="display:flex; justify-content:center; height:50px; width:100px; background-color:red">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!-------------------------------------------align-items:center--------------------------------------------------------->
<tr>
<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">[[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; align-items:center</nowiki><br>''<nowiki>Center text or image inside an item vertically. </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; align-items:center; height:50px; width:100px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:yellow">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">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">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">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">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">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">1</div>
<div style="flex:6; height:50px; background-color:white"></div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="flex:1; height:50px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red">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 13:11, 27 December 2016

FLEXBOX CHEATSHEET
Condensed guide to Wikitext coding

Click on sort icon to put list in alphabetical order

<1--------------------------------------flexbox wraping------------------------------------------------>
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
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
Different flex numbers 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
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=2731785"