Flexbox Cheatsheet: Difference between revisions

m
no edit summary
mNo edit summary
mNo edit summary
Line 9: Line 9:
<th style="border:1px solid black; font-size:1.2vw; padding:10px">You Get</th>
<th style="border:1px solid black; font-size:1.2vw; padding:10px">You Get</th>
</tr>
</tr>
<!-----------------------------------display flex - horizontal display--------------------------------------------------------------------->
<tr>
<tr>
<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; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Placing objects in a row|Placing objects in rows]]</td>
Line 20: Line 21:
</div></div></td>
</div></div></td>
</tr>
</tr>
<!-------------------------------------justify-content:flex-end---------------------------------------------------------->
<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 31: Line 33:
</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 46: Line 39:
<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; 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; 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:orange; text-align:center">2</div>
Line 52: Line 45:
</div></div></td>
</div></div></td>
</tr>
</tr>
<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>