Flexbox Cheatsheet: Difference between revisions
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: | <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: | <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: | <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: | <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: | <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: | <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: | <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: | <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: | <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> | ||
Revision as of 14:03, 27 December 2016
FLEXBOX CHEATSHEET
Condensed guide to Wikitext coding
<1--------------------------------------flexbox wraping------------------------------------------------>
Condensed guide to Wikitext coding
Click on sort icon to put list in alphabetical order
| Description | Flex coding | You Get |
|---|---|---|
| Placing objects in rows | display:flex |
1
2
3
|
| Placing objects at end of containers | justify-content:flex-end |
1
2
3
|
| Placing objects in the center of containers | justify-content:center |
1
2
3
|
| Placing objects evenly spaced across a containter | justify-content:space-between |
1
2
3
|
| Evenly spacing objects with space on either end | justify-content:space-around |
1
2
3
|
| Placing objects at end of containers | flex:# |
1
2
3
|
| Different flex numbers | Different flex numbers |
1
2
3
|
| flex zero | Box one with flex number zero |
1
2
3
|
| Change order in row | order:# |
1
2
3
|
| Wrapping boxes in limited space | flex-wrap:wrap |
1
2
3
|
| Placing objects in a column | flex-direction:column |
1
2
3
|
| Centering horizontally | display;flex; justify-content:center Place on each line where you want to center text or image horizontally |
1
2
3
|
| Centering vertically | display:flex; align-items:center Place on each line where you want to center text or image vertically |
1
2
3
|
| Centering vertically & Horizontally | display:flex; justify-content:center; align-items:center Place on each line where you want to center text or image vertically |
1
2
3
|
| Placing objects at opposite ends of containers | White box with flex:6 between items 1 and 2 |
1
2
3
|
| Placing objects at end of containers | justify-content:flex-end |
1
2
3
|
| Placing objects at end of containers | justify-content:flex-end |
1
2
3
|
| Placing objects at end of containers | justify-content:flex-end |
1
2
3
|