Flexbox Cheatsheet: Difference between revisions

Flexbox Cheatsheet (view source)

Revision as of 09:23, 28 December 2016

8 bytes removed , 28 December 2016

m

no edit summary

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

82,369

edits

@@ Line 10: / Line 10: @@
 <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 20: @@
 <!-----------------------------------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 92: @@
 <!----------------------------------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 153: @@
 <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 165: @@
 <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 177: @@
 <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">