Flexbox Cheatsheet: Difference between revisions

m
no edit summary
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: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
  <div style="border:5px solid darkred; border-radius:10px; background:#FFE4B5; width:1200px; 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
''Click on sort icon to put list in alphabetical order''
''Click on sort icon to put list in alphabetical order''
</div>  
</div>  
Line 10: Line 10:
</tr>
</tr>
<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|Placing objects in rows]]</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="border:2px solid red; padding:2px">
<div style="display:flex">
<div style="height:50px; width:30px; background-color:yellow; text-align:center; font-size:2em">1</div>
<div style="height:50px; width:30px; background-color:yellow; text-align:center; font-size:2em">1</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center; font-size:2em">2</div>
<div style="height:50px; width:30px; background-color:orange; text-align:center; font-size:2em">2</div>
<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:red; text-align:center; font-size:2em">3</div>
</div></td>
</div></div></td>
</tr>
</tr>
<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; text-align:center; font-size:2em">1</div>
</td></tr></table>
<div style="height:50px; width:30px; background-color:orange; text-align:center; font-size:2em">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center; font-size:2em">3</div>
</div></div></td>
</tr>
</table>