Flexbox Cheatsheet: Difference between revisions
Brepouille (talk | contribs) m (added category) |
mNo edit summary |
||
| Line 3: | Line 3: | ||
''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:1200px; border:2px solid green" class="sortable"> | <table style="min-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: | <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: | <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: | <th style="border:1px solid black; font-size:1.2vw; padding:10px">You Get</th> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
| Line 15: | Line 15: | ||
<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 | <div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div> | ||
<div style="height:50px; width:30px; background-color:orange; text-align:center | <div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | ||
<div style="height:50px; width:30px; background-color:red; text-align:center | <div style="height:50px; width:30px; background-color:red; text-align:center">3</div> | ||
</div></div></td> | </div></div></td> | ||
</tr> | </tr> | ||
| Line 26: | Line 26: | ||
<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; | <div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div> | ||
<div style="height:50px; width:30px; background-color:orange; text-align:center; | <div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | ||
<div style="height:50px; width:30px; background-color:red; text-align:center; | <div style="height:50px; width:30px; background-color:red; text-align:center">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: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:flex-end"> | |||
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div> | |||
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | |||
<div style="height:50px; width:30px; background-color:red; text-align:center">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; text-align:center">1</div> | |||
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | |||
<div style="height:50px; width:30px; background-color:red; text-align:center">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; text-align:center">1</div> | |||
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | |||
<div style="height:50px; width:30px; background-color:red; text-align:center">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; text-align:center">1</div> | |||
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | |||
<div style="height:50px; width:30px; background-color:red; text-align:center">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; text-align:center">1</div> | |||
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | |||
<div style="height:50px; width:30px; background-color:red; text-align:center">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; text-align:center">1</div> | |||
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | |||
<div style="height:50px; width:30px; background-color:red; text-align:center">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; text-align:center">1</div> | |||
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | |||
<div style="height:50px; width:30px; background-color:red; text-align:center">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; text-align:center">1</div> | |||
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | |||
<div style="height:50px; width:30px; background-color:red; text-align:center">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; text-align:center">1</div> | |||
<div style="height:50px; width:30px; background-color:orange; text-align:center">2</div> | |||
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div> | |||
</div></div></td> | </div></div></td> | ||
</tr> | </tr> | ||
Revision as of 12:40, 27 December 2016
FLEXBOX CHEATSHEET
Condensed guide to Wikitext coding
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 at end of containers | justify-content:center |
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
|
| Placing objects at end of containers | justify-content:flex-end |
1
2
3
|