Flexbox Cheatsheet: Difference between revisions

From FamilySearch Wiki
VisualWikitext
mNo edit summary
mNo edit summary
Line 1: Line 1:
<div><!--opening table tag for entire document---------------------------------->
<div><!--opening table tag for entire document---------------------------------->
  <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
  <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
''Click on sort icon to put list in alphabetical order''
''Click on sort icon to put list in alphabetical order''
</div>  
</div>  
Line 16: Line 16:
<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; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 28: 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; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 40: 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; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 52: 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; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 64: Line 64:
<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:space-around">
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 76: Line 76:
<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="flex:1; height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="flex:1; height:50px; width:30px; background-color:yellow">1</div>
<div style="flex:1; height:50px; width:30px; background-color:orange; text-align:center">2</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; text-align:center">3</div>
<div style="flex:1; height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 88: Line 88:
<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="flex:1; height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="flex:1; height:50px; width:30px; background-color:yellow">1</div>
<div style="flex:2; height:50px; width:30px; background-color:orange; text-align:center">2</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; text-align:center">3</div>
<div style="flex:1; height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 100: Line 100:
<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; text-align:center">1</div>
<div style="flex:0; height:50px; width:30px; background-color:yellow">1</div>
<div style="flex:1; height:50px; width:30px; background-color:orange; text-align:center">2</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; text-align:center">3</div>
<div style="flex:1; height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 112: Line 112:
<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; text-align:center">1</div>
<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; text-align:center">2</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; text-align:center">3</div>
<div style="flex:1; order:3; height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 124: Line 124:
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex; flex-wrap:wrap">
<div style="display:flex; flex-wrap:wrap">
<div style="height:20px; width:300px; background-color:yellow; text-align:center">1</div>
<div style="height:20px; width:300px; background-color:yellow">1</div>
<div style="height:20px; width:300px; background-color:orange; text-align:center">2</div>
<div style="height:20px; width:300px; background-color:orange">2</div>
<div style="height:20px; width:300px; background-color:red; text-align:center">3</div>
<div style="height:20px; width:300px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!------------------------------------------flex-direction:column----------------------------------------------->
<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 in a column]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:flex-end</nowiki></td>
<td style="border:1px solid black; padding-left:5px"><nowiki>flex-direction:column</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; flex-direction:column">
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!-------------------------------------------justify-content:center------------------------------------------------>
<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>
Line 146: Line 148:
<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; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 157: Line 159:
<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; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 168: Line 170:
<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; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 179: Line 181:
<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; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 190: Line 192:
<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; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 201: Line 203:
<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; text-align:center">1</div>
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>

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"