Interface administrators, smwadministrator, smwcurator, smweditor
82,369
edits
Flexbox Cheatsheet: Difference between revisions
m
no edit summary
mNo edit summary |
mNo edit summary |
||
| Line 84: | Line 84: | ||
<tr> | <tr> | ||
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Different flex numbers]]</td> | <td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Different flex numbers]]</td> | ||
<td style="border:1px solid black; padding-left:5px"><nowiki> | <td style="border:1px solid black; padding-left:5px"><nowiki>Different flex numbers</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"> | ||
| Line 93: | Line 93: | ||
</div></div></td> | </div></div></td> | ||
</tr> | </tr> | ||
<!-------------------------------------------flex:0-------------------------------------------------> | |||
<tr> | <tr> | ||
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally| | <td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|flex zero]]</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>justify-content:flex-end</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; justify-content:flex-end"> | ||
<div style="height:50px; width:30px; background-color:yellow; text-align:center">1</div> | <div style="flex:0; 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="flex:1; height:50px; width:30px; background-color:orange; text-align:center">2</div> | ||
<div style="height:50px; width:30px; background-color:red; text-align:center">3</div> | <div style="flex:1; height:50px; width:30px; background-color:red; text-align:center">3</div> | ||
</div></div></td> | </div></div></td> | ||
</tr> | </tr> | ||