Flexbox Cheatsheet: Difference between revisions

m
no edit summary
mNo edit summary
mNo edit summary
Line 143: Line 143:
<!-------------------------------------------justify-content:center------------------------------------------------>
<!-------------------------------------------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|Centering horizontally]]</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>display;flex; justify-content:center</nowiki><br><nowiki>''Place on each line where you want to center text or image horizontally''</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">
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="display:flex; justify-content:center; height:50px; width:30px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="display:flex; justify-content:center; height:50px; width:30px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
<div style="display:flex; justify-content:center; height:50px; width:30px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>