Flexbox Cheatsheet: Difference between revisions

From FamilySearch Wiki
(Created page with "<div><!--opening table tag for entire document----------------------------------> <div style="border:5px solid darkred; border-radius:10px; background:#FFE4B5; width:870px; h...")
 
mNo edit summary
Line 6: Line 6:
<tr style="background:#FFE4B5">
<tr style="background:#FFE4B5">
<th style="width:150px; border:1px solid black; font-size:18px; padding:10px">Description</th>
<th style="width:150px; border:1px solid black; font-size:18px; padding:10px">Description</th>
<th style="width:50%; border:1px solid black; font-size:18px; padding:10px">Type</th>
<th style="width:50%; border:1px solid black; font-size:18px; padding:10px">Flex coding</th>
<th style="border:1px solid black; font-size:18px; padding:10px">You Get</th>
<th style="border:1px solid black; font-size:18px; padding:10px">You Get</th>
</tr>
</tr>
Line 13: Line 13:
<td style="border:1px solid black"><nowiki>display:flex</nowiki></td>
<td style="border:1px solid black"><nowiki>display:flex</nowiki></td>
<td style="border:1px solid black"><div style="display:flex">
<td style="border:1px solid black"><div style="display:flex">
<div style="height:30px; 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:30px; 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:30px; 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></td>
</tr>
</tr>

Revision as of 16:49, 5 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
Lists - unordered *Item one
*Item two
*Item three
  • Item one
  • Item two
  • item three