Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki)
82,369
edits
Flexbox Cheatsheet: Difference between revisions
m
no edit summary
mNo edit summary |
mNo edit summary |
||
| Line 163: | Line 163: | ||
<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:30px; 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:30px; background-color:red">3</div> | ||
</div></div></td> | |||
</tr> | |||
<!-------------------------------------------center items both verically and horizontally---------------------------------------------------------> | |||
<tr> | |||
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Centering vertically]]</td> | |||
<td style="border:1px solid black; padding-left:5px"><nowiki>display:flex; justify-content:center; align-items:center</nowiki><br>''<nowiki>Place on each line where you want to center text or image vertically</nowiki>''</td> | |||
<td style="border:1px solid black; padding:5px"> | |||
<div style="border:2px solid red; padding:2px"> | |||
<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:30px; 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></div></td> | </div></div></td> | ||
</tr> | </tr> | ||