Flexbox Cheatsheet: Difference between revisions

← Older edit

Flexbox Cheatsheet (view source)

Revision as of 09:29, 27 February 2018

1,076 bytes added , 27 February 2018

m

no edit summary

Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki)

82,369

edits

@@ 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---------------------------------->
-  <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
+  <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''
 </div>
@@ Line 10: / Line 25: @@
 <nowiki><div>Item 2</div></nowiki><br>
 <nowiki><div>Item 3</div></nowiki><br>
-<nowiki></div></nowiki></div><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">
@@ Line 20: / Line 35: @@
 <!-----------------------------------display flex - horizontal display--------------------------------------------------------------------->
 <tr>
-<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Placing objects in a row|Placing objects in rows]]</td>
+<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:5px">
@@ Line 92: / Line 107: @@
 <!----------------------------------flex:2------------------------------------------------------>
 <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|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:5px">
@@ Line 153: / Line 168: @@
 <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"><nowiki>display;flex; justify-content:center</nowiki><br>''<nowiki>Place on each line where you want to center text or image horizontally</nowiki>''</td>
+<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">
 <div style="border:2px solid red; padding:2px">
@@ Line 165: / Line 180: @@
 <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; 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-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">
 <div style="border:2px solid red; padding:2px">
@@ Line 177: / Line 192: @@
 <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"><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-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">
 <div style="border:2px solid red; padding:2px">
@@ Line 202: / Line 217: @@
 </table><br>
 [[Help:Wiki University Flexbox - Introduction|Back to Flexbox Lessons]]
-[[Category:Wikitext Lessons]]
+<!---------------------------------END OF MATERIAL------------------------------------------->
+</div>
+<!-------------------------------chapters bottom---------------------------------------------------->
+<div style="clear:both"></div>
+</div>
+__NOTOC__
+[[Category:Wiki Lessons]]