Flexbox Cheatsheet: Difference between revisions

Revision as of 14:05, 27 December 2016

FLEXBOX CHEATSHEET
Condensed guide to Wikitext coding

Click on sort icon to put list in alphabetical order

<1--------------------------------------flexbox wraping------------------------------------------------>

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

@@ Line 1: / Line 1: @@
-<div><!--opening table tag for entire document---------------------------------->
+<!--opening table tag for entire document---------------------------------->
   <div style="border:5px solid darkred; border-radius:10px; background:#FFE4B5; width:1170px; height:100%; 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''
@@ Line 202: / Line 202: @@
 </div></div></td>
 </tr>
-<tr>
-<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Placing objects at end of containers]]</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">
-<div style="border:2px solid red; padding:2px">
-<div style="display:flex; justify-content:flex-end">
-<div style="height:50px; width:30px; background-color:yellow">1</div>
-<div style="height:50px; width:30px; background-color:orange">2</div>
-<div style="height:50px; width:30px; background-color:red">3</div>
-</div></div></td>
-</tr>
-<tr>
-<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Placing objects at end of containers]]</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">
-<div style="border:2px solid red; padding:2px">
-<div style="display:flex; justify-content:flex-end">
-<div style="height:50px; width:30px; background-color:yellow">1</div>
-<div style="height:50px; width:30px; background-color:orange">2</div>
-<div style="height:50px; width:30px; background-color:red">3</div>
-</div></div></td>
-</tr>
 </table>
 [[Category:Wikitext Lessons]]