FamilySearch Wiki

Flexbox Cheatsheet: Difference between revisions

Page Talk

Flexbox Cheatsheet (view source)

Revision as of 09:29, 27 February 2018

1,225 bytes added ,  27 February 2018
m
no edit summary
VisualWikitext
mNo edit summary
mNo edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div><!--opening table tag for entire document---------------------------------->
<div style="display:grid; grid-template-columns:10% 10% 20% 20% 20% 20%">
  <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
<!--------------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="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|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-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|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-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 117: Line 141:
</div></div></td>
</div></div></td>
</tr>
</tr>
<1--------------------------------------flexbox wraping------------------------------------------------>
<!--------------------------------------flexbox wraping------------------------------------------------>
<tr>
<tr>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Wrapping boxes in limited space]]</td>
<td style="border:1px solid black; padding-left:5px">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Wrapping boxes in limited space]]</td>
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>''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">
<td style="border:1px solid black; padding:5px">
<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:30px; background-color:yellow">1</div>
<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:30px; background-color:orange">2</div>
<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:30px; background-color:red">3</div>
<div style="display:flex; justify-content:center; height:50px; width:100px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!-------------------------------------------align-items:center--------------------------------------------------------->
<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">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Centering vertically]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:flex-end</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">
<td style="border:1px solid black; padding:5px">
<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="height:50px; width:30px; background-color:yellow">1</div>
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
<div style="display:flex; align-items:center; height:50px; width:100px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</tr>
<!-------------------------------------------center items both verically and horizontally--------------------------------------------------------->
<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">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Centering vertically & Horizontally]]</td>
<td style="border:1px solid black; padding-left:5px"><nowiki>justify-content:flex-end</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">
<td style="border:1px solid black; padding:5px">
<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="height:50px; width:30px; background-color:yellow">1</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:100px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="display:flex; justify-content:center; align-items:center; height:50px; width:100px; background-color:orange">2</div>
<div style="height:50px; width:30px; background-color:red">3</div>
<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>
<!-------------------------------------------items at opposite ends------------------------------------------------------------>
<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">[[Help:Wiki University Flexbox - Display Horizontal#Moving boxes around horizontally|Placing objects at opposite ends 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-left:5px"><nowiki>White box with flex:6 between items 1 and 2</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">
<div style="display:flex; justify-content:flex-end">
<div style="display:flex; justify-content:flex-end">
<div style="height:50px; width:30px; background-color:yellow">1</div>
<div style="flex:1; height:50px; background-color:yellow">1</div>
<div style="height:50px; width:30px; background-color:orange">2</div>
<div style="flex:6; height:50px; background-color:white"></div>
<div style="height:50px; width:30px; background-color:red">3</div>
<div style="flex:1; height:50px; background-color:orange">2</div>
<div style="flex:1; height:50px; background-color:red">3</div>
</div></div></td>
</div></div></td>
</tr>
</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]]
</table><br>
[[Help:Wiki University Flexbox - Introduction|Back to Flexbox Lessons]]
<!---------------------------------END OF MATERIAL------------------------------------------->
</div>
<!-------------------------------chapters bottom---------------------------------------------------->
<div style="clear:both"></div>
 
</div>
__NOTOC__
[[Category:Wiki Lessons]]
Retrieved from "https://integration-ru.familysearch.org/en/wiki/Special:MobileDiff/2731789...3143816"