Flexbox Cheatsheet: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div style="display:grid; grid-template-columns:10% 10% 20% 20% 20% 20%"> | |||
<!--------------row 1--------------------------> | |||
<!--tool bar---------------------------------------------------> | |||
{{HTML School}} | |||
<!----------------row 2----------------------------> | |||
<!-------------------menu--------------------------------> | |||
<div style="grid-column:1/3; background-color:#FFEDCC; box-shadow:1px 1px 5px #888888">{{Wiki Flexbox Sidebar}}</div> | |||
<!-----------------------main------------------------> | |||
<!-------------------------------chapters top row----------------------------------> | |||
<div style="grid-column:3/8; padding-left:0.5em"> | |||
<!-------------------------------chapters top row----------------------------------> | |||
<div style="margin-left:0.5em"> | |||
<!-----------------------MAIN MATERIAL BELOW THIS LINE--------------------------------------------> | |||
<!--opening table tag for entire document----------------------------------> | <!--opening table tag for entire document----------------------------------> | ||
<div style="border:5px solid darkred; border-radius:10px; background:#FFE4B5 | |||
<div style="text-align:center; border:5px solid darkred; border-radius:10px; background:#FFE4B5; padding:10px; margin-bottom:10px; box-shadow:5px 5px 3px #888888"><span style="font-size:36px; font-family:arial; padding:10px">FLEXBOX CHEATSHEET</span><br>Condensed guide to Wikitext coding | |||
''Click on sort icon to put list in alphabetical order'' | ''Click on sort icon to put list in alphabetical order'' | ||
</div> | </div> | ||
*REMEMBER: All Flexbox coding of items requires that they are inside of a container, such as a "div" or "p" tag: <br> | |||
<div style="border:2px solid green; padding:3px"> | |||
<nowiki><div style="display:flex"></nowiki><br> | |||
<nowiki><div>Item 1</div></nowiki><br> | |||
<nowiki><div>Item 2</div></nowiki><br> | |||
<nowiki><div>Item 3</div></nowiki><br> | |||
<nowiki></div></nowiki></div> | |||
[[Help:Wiki University Flexbox - Introduction|Back to Flexbox Lessons]] | |||
<table style="max-width:1200px; border:2px solid green" class="sortable"> | <table style="max-width:1200px; border:2px solid green" class="sortable"> | ||
<tr style="background:#FFE4B5"> | <tr style="background:#FFE4B5"> | ||
| Line 11: | Line 35: | ||
<!-----------------------------------display flex - horizontal display---------------------------------------------------------------------> | <!-----------------------------------display flex - horizontal display---------------------------------------------------------------------> | ||
<tr> | <tr> | ||
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Placing objects in a row| | <td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Placing objects in a row|Making all items the same size]]</td> | ||
<td style="border:1px solid black; padding-left:5px"><nowiki>display:flex</nowiki></td> | <td style="border:1px solid black; padding-left:5px"><nowiki>display:flex</nowiki></td> | ||
<td style="border:1px solid black; padding:5px"> | <td style="border:1px solid black; padding:5px"> | ||
| Line 83: | Line 107: | ||
<!----------------------------------flex:2------------------------------------------------------> | <!----------------------------------flex:2------------------------------------------------------> | ||
<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|Controlling size of flex items]]</td> | ||
<td style="border:1px solid black; padding-left:5px"><nowiki>Different flex numbers</nowiki></td> | <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"> | ||
| Line 144: | Line 168: | ||
<tr> | <tr> | ||
<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">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Centering horizontally]]</td> | ||
<td style="border:1px solid black; padding-left:5px"><nowiki>display;flex; justify-content:center</nowiki><br>''<nowiki> | <td style="border:1px solid black; padding-left:5px"><nowiki>display;flex; justify-content:center</nowiki><br>''<nowiki>Centering text or images inside an item 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"> | ||
| Line 156: | Line 180: | ||
<tr> | <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">[[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; align-items:center</nowiki><br>''<nowiki> | <td style="border:1px solid black; padding-left:5px"><nowiki>display:flex; align-items:center</nowiki><br>''<nowiki>Center text or image inside an item vertically. </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 168: | Line 192: | ||
<tr> | <tr> | ||
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Centering vertically & Horizontally]]</td> | <td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Centering vertically & Horizontally]]</td> | ||
<td style="border:1px solid black; padding-left:5px"><nowiki>display:flex; justify-content:center; align-items:center</nowiki><br>''<nowiki> | <td style="border:1px solid black; padding-left:5px"><nowiki>display:flex; justify-content:center; align-items:center</nowiki><br>''<nowiki>Center text or image inside an item both horizonatly and vertically at the same time. </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 191: | Line 215: | ||
</tr> | </tr> | ||
</table> | </table><br> | ||
[[Help:Wiki University Flexbox - Introduction|Back to Flexbox Lessons]] | |||
<!---------------------------------END OF MATERIAL-------------------------------------------> | |||
</div> | |||
<!-------------------------------chapters bottom----------------------------------------------------> | |||
<div style="clear:both"></div> | |||
[[Category: | </div> | ||
__NOTOC__ | |||
[[Category:Wiki Lessons]] | |||
Latest revision as of 09:29, 27 February 2018
Flexbox/Grids Lessons
FLEXBOX CHEATSHEET
Condensed guide to Wikitext coding
Condensed guide to Wikitext coding
Click on sort icon to put list in alphabetical order
- REMEMBER: All Flexbox coding of items requires that they are inside of a container, such as a "div" or "p" tag:
<div style="display:flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
| Description | Flex coding | You Get |
|---|---|---|
| Making all items the same size | 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
|
| Controlling size of flex items | 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 Centering text or images inside an item horizontally. |
1
2
3
|
| Centering vertically | display:flex; align-items:center Center text or image inside an item vertically. |
1
2
3
|
| Centering vertically & Horizontally | display:flex; justify-content:center; align-items:center Center text or image inside an item both horizonatly and vertically at the same time. |
1
2
3
|
| Placing objects at opposite ends of containers | White box with flex:6 between items 1 and 2 |
1
2
3
|