Flexbox Cheatsheet: Difference between revisions

m
no edit summary
mNo edit summary
mNo edit summary
Line 148: Line 148:
<div style="border:2px solid red; padding:2px">
<div style="border:2px solid red; padding:2px">
<div style="display:flex">
<div style="display:flex">
<div style="display:flex; justify-content:center; height:50px; width:30px; background-color:yellow">1</div>
<div style="display:flex; justify-content:center; height:50px; width:100px; background-color:yellow">1</div>
<div style="display:flex; justify-content:center; height:50px; width:30px; background-color:orange">2</div>
<div style="display:flex; justify-content:center; height:50px; width:100px; background-color:orange">2</div>
<div style="display:flex; justify-content:center; height:50px; width:30px; background-color:red">3</div>
<div style="display:flex; justify-content:center; height:50px; width:100px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 160: Line 160:
<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:flex-end">
<div style="display:flex; align-items:center; height:50px; width:30px; background-color:yellow">1</div>
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:yellow">1</div>
<div style="display:flex; align-items:center; height:50px; width:30px; background-color:orange">2</div>
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:orange">2</div>
<div style="display:flex; align-items:center; height:50px; width:30px; background-color:red">3</div>
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
Line 172: Line 172:
<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:flex-end">
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:30px; background-color:yellow">1</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:100px; background-color:yellow">1</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:30px; background-color:orange">2</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:100px; background-color:orange">2</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:30px; background-color:red">3</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:100px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>