Flexbox Cheatsheet: Difference between revisions

m
no edit summary
mNo edit summary
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="min-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">
<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:1.2vw; padding:10px">Description</th>
Line 106: Line 106:
</tr>
</tr>
<!--------------------------------------------order:#------------------------------------------------------------->
<!--------------------------------------------order:#------------------------------------------------------------->
<tr>
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Change order in row]]</td>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Change order in row]]</td>
Line 121: Line 117:
</div></div></td>
</div></div></td>
</tr>
</tr>
<1--------------------------------------flexbox wraping------------------------------------------------>
<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|Wrapping boxes in limited space]]</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-wrap:wrap</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-wrap:wrap">
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div>
<div style="height:20px; width:300px; 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:20px; width:300px; background-color:orange; text-align:center">2</div>
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div>
<div style="height:20px; width:300px; background-color:red; text-align:center">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>