Last active
September 14, 2019 11:00
-
-
Save Codyzhao/9a9bb4827a86204de02f21ee74d80d76 to your computer and use it in GitHub Desktop.
Untitled
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: Helvetica Neue, Helvetica, Arial, sans-serif; | |
} | |
h3 { | |
color: #999999; | |
} | |
h3 em { | |
color: black; | |
} | |
.parent:after { | |
content: 'container'; | |
position: absolute; | |
right: 40px; | |
font-size: 60px; | |
line-height: 110px; | |
color: white; | |
} | |
.box { | |
width: 100px; | |
height: 100px; | |
background: yellow; | |
margin: 10px; | |
text-align: center; | |
font-size: 30px; | |
font-weight: bold; | |
line-height: 100px; | |
position: relative; | |
} | |
.box small { | |
display: block; | |
margin: 0 auto; | |
font-size: 45%; | |
position: absolute; | |
line-height: 20px; | |
top: 75%; | |
width: 100%; | |
} | |
.container { | |
display: flex; | |
background-color: lightGrey; | |
} | |
.order-negative-1 { | |
order: -1; | |
} | |
.order-1 { | |
order: 1; | |
} | |
.order-2 { | |
order: 2; | |
} | |
.order-3 { | |
order: 3; | |
} | |
.order-5 { | |
order: 5; | |
} | |
.direction-row { | |
flex-direction: row; | |
} | |
.direction-row-reverse { | |
flex-direction: row-reverse; | |
} | |
.direction-column { | |
flex-direction: column; | |
} | |
.direction-column-reverse { | |
flex-direction: column-reverse; | |
} | |
.no-wrap { | |
flex-wrap: nowrap; | |
} | |
.wrap { | |
flex-wrap: wrap; | |
} | |
.wrap-reverse { | |
flex-wrap: wrap-reverse; | |
} | |
.flow-row-reverse-wrap-reverse { | |
flex-flow: row-reverse wrap-reverse; | |
} | |
.grow-1 { | |
flex-grow: 1; | |
} | |
.grow-2 { | |
flex-grow: 2; | |
} | |
.shrink-2 { | |
flex-shrink: 2; | |
} | |
.shrink-4 { | |
flex-shrink: 4; | |
} | |
.basis-0 { | |
flex-basis: 0; | |
} | |
.basis-20-percent { | |
flex-basis: 20%; | |
} | |
.flex-g-s-b { | |
flex: 2 4 auto; | |
} | |
.jc-start { | |
justify-content: flex-start; | |
} | |
.jc-end { | |
justify-content: flex-end; | |
} | |
.jc-center { | |
justify-content: center; | |
} | |
.jc-between { | |
justify-content: space-between; | |
} | |
.jc-around { | |
justify-content: space-around; | |
} | |
.jc-evenly { | |
justify-content: space-evenly; | |
} | |
.as-start { | |
align-self: flex-start; | |
} | |
.as-end { | |
align-self: flex-end; | |
} | |
.as-center { | |
align-self: center; | |
} | |
.as-baseline { | |
align-self: baseline; | |
} | |
.as-stretch { | |
align-self: stretch; | |
} | |
.ai-start { | |
align-items: flex-start; | |
} | |
.ai-end { | |
align-items: flex-end; | |
} | |
.ai-center { | |
align-items: center; | |
} | |
.ai-stretch { | |
align-items: stretch; | |
} | |
.ai-baseline { | |
align-items: baseline; | |
} | |
.ac-start { | |
align-content: flex-start; | |
} | |
.ac-end { | |
align-content: flex-end; | |
} | |
.ac-center { | |
align-content: center; | |
} | |
.ac-stretch { | |
align-content: stretch; | |
} | |
.ac-between { | |
align-content: space-between; | |
} | |
.ac-around { | |
align-content: space-around; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>CSS Flexbox</h1> | |
<div class="container parent"> | |
<div class="box">item</div> | |
<div class="box">item</div> | |
<div class="box">item</div> | |
<div class="box">item</div> | |
<div class="box">item</div> | |
</div> | |
<br /> | |
<hr /> | |
<h2>Order</h2> | |
<h3>Default</h3> | |
<div class="container"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
</div> | |
<h3>With Order CSS style</h3> | |
<div class="container"> | |
<div class="box order-1">1 <small>order: 1</small></div> | |
<div class="box order-3">2 <small>order: 3</small></div> | |
<div class="box order-2">3 <small>order: 2</small></div> | |
<div class="box order-1">4 <small>order: 1</small></div> | |
<div class="box order-negative-1">5 <small>order: -1</small></div> | |
</div> | |
<br /> | |
<hr /> | |
<h2>Direction</h2> | |
<h3>Default <em>flex-direction: row;</em></h3> | |
<div class="container direction-row"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
</div> | |
<h3>Row reverse <em>flex-direction: row-reverse;</em></h3> | |
<div class="container direction-row-reverse"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
</div> | |
<br /> | |
<div class="container" style="background-color: white;"> | |
<div style="width: 45%; margin-right: 10%;"> | |
<h3>Column <em>flex-direction: column;</em></h3> | |
<div class="container direction-column"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
</div> | |
</div> | |
<div style="width: 45%;"> | |
<h3>Column reverse <em>flex-direction: column-reverse;</em></h3> | |
<div class="container direction-column-reverse"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
</div> | |
</div> | |
</div> | |
<br /> | |
<hr /> | |
<h2>Wrap</h2> | |
<h3>Default <em>flex-wrap: nowrap;</em></h3> | |
<div class="container no-wrap"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
<div class="box">6</div> | |
<div class="box">7</div> | |
<div class="box">8</div> | |
<div class="box">9</div> | |
<div class="box">10</div> | |
<div class="box">11</div> | |
<div class="box">12</div> | |
<div class="box">13</div> | |
<div class="box">14</div> | |
<div class="box">15</div> | |
<div class="box">16</div> | |
<div class="box">17</div> | |
<div class="box">18</div> | |
<div class="box">19</div> | |
<div class="box">20</div> | |
</div> | |
<h3>Wrap <em>flex-wrap: wrap;</em></h3> | |
<div class="container wrap"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
<div class="box">6</div> | |
<div class="box">7</div> | |
<div class="box">8</div> | |
<div class="box">9</div> | |
<div class="box">10</div> | |
<div class="box">11</div> | |
<div class="box">12</div> | |
<div class="box">13</div> | |
<div class="box">14</div> | |
<div class="box">15</div> | |
<div class="box">16</div> | |
<div class="box">17</div> | |
<div class="box">18</div> | |
<div class="box">19</div> | |
<div class="box">20</div> | |
</div> | |
<h3>Wrap reverse <em>flex-wrap: wrap-reverse;</em></h3> | |
<div class="container wrap-reverse"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
<div class="box">6</div> | |
<div class="box">7</div> | |
<div class="box">8</div> | |
<div class="box">9</div> | |
<div class="box">10</div> | |
<div class="box">11</div> | |
<div class="box">12</div> | |
<div class="box">13</div> | |
<div class="box">14</div> | |
<div class="box">15</div> | |
<div class="box">16</div> | |
<div class="box">17</div> | |
<div class="box">18</div> | |
<div class="box">19</div> | |
<div class="box">20</div> | |
</div> | |
<h3> | |
flex-flow: <‘flex-direction’> || <‘flex-wrap’> | |
<em>flex-flow: row-reverse wrap-reverse;</em> | |
</h3> | |
<div class="container flow-row-reverse-wrap-reverse"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
<div class="box">6</div> | |
<div class="box">7</div> | |
<div class="box">8</div> | |
<div class="box">9</div> | |
<div class="box">10</div> | |
<div class="box">11</div> | |
<div class="box">12</div> | |
<div class="box">13</div> | |
<div class="box">14</div> | |
<div class="box">15</div> | |
<div class="box">16</div> | |
<div class="box">17</div> | |
<div class="box">18</div> | |
<div class="box">19</div> | |
<div class="box">20</div> | |
</div> | |
<br /> | |
<hr /> | |
<h2>Justify content</h2> | |
<h3><em>justify-content: flex-start;</em></h3> | |
<div class="container jc-start"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
</div> | |
<h3><em>justify-content: flex-end;</em></h3> | |
<div class="container jc-end"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
</div> | |
<h3><em>justify-content: center;</em></h3> | |
<div class="container jc-center"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
</div> | |
<h3><em>justify-content: space-between;</em></h3> | |
<div class="container jc-between"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
</div> | |
<h3><em>justify-content: space-around;</em></h3> | |
<div class="container jc-around"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
</div> | |
<h3><em>justify-content: space-evenly;</em></h3> | |
<div class="container jc-evenly"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
</div> | |
<br /> | |
<hr /> | |
<h2>Align Items</h2> | |
<h3>Default <em>align-items: flex-start;</em></h3> | |
<div class="container ai-start"> | |
<div class="box" style="height: 150px;">1</div> | |
<div class="box" style="height: 200px;">2</div> | |
<div class="box" style="height: 100px;">3</div> | |
<div class="box" style="height: 130px;">4</div> | |
</div> | |
<h3><em>align-items: flex-end;</em></h3> | |
<div class="container ai-end"> | |
<div class="box" style="height: 150px;">1</div> | |
<div class="box" style="height: 200px;">2</div> | |
<div class="box" style="height: 100px;">3</div> | |
<div class="box" style="height: 130px;">4</div> | |
</div> | |
<h3><em>align-items: center;</em></h3> | |
<div class="container ai-center"> | |
<div class="box" style="height: 150px;">1</div> | |
<div class="box" style="height: 200px;">2</div> | |
<div class="box" style="height: 100px;">3</div> | |
<div class="box" style="height: 130px;">4</div> | |
</div> | |
<h3><em>align-items: stretch;</em></h3> | |
<div class="container ai-stretch"> | |
<div class="box" style="height: auto;">1</div> | |
<div class="box" style="height: 200px;">2</div> | |
<div class="box" style="height: auto;">3</div> | |
<div class="box" style="height: auto;">4</div> | |
</div> | |
<h3><em>align-items: baseline;</em></h3> | |
<div class="container ai-baseline"> | |
<div class="box" style="line-height: 60px;">1</div> | |
<div class="box" style="line-height: 40px; padding-top: 20px;">2</div> | |
<div class="box">3</div> | |
<div class="box" style="line-height: 80px;">4</div> | |
</div> | |
<br /> | |
<br /> | |
<h1>Additional Information</h1> | |
<h2>Grow</h2> | |
<h3>Default <em>flex-grow: 0;</em></h3> | |
<div class="container"> | |
<div class="box">1 <small>grow: 0</small></div> | |
<div class="box">2 <small>grow: 0</small></div> | |
<div class="box">3 <small>grow: 0</small></div> | |
</div> | |
<h3>Set all items to <em>flex-grow: 1;</em></h3> | |
<div class="container"> | |
<div class="box grow-1">1 <small>grow: 1</small></div> | |
<div class="box grow-1">2 <small>grow: 1</small></div> | |
<div class="box grow-1">3 <small>grow: 1</small></div> | |
</div> | |
<h3>Set the item 2 to <em>flex-grow: 2;</em></h3> | |
<div class="container"> | |
<div class="box grow-1">1 <small>grow: 1</small></div> | |
<div class="box grow-2">2 <small>grow: 2</small></div> | |
<div class="box grow-1">3 <small>grow: 1</small></div> | |
</div> | |
<br /> | |
<hr /> | |
<h2>Shrink</h2> | |
<h3>Default <em>flex-shrink: 1;</em></h3> | |
<div class="container"> | |
<div class="box">1 <small>shrink: 1</small></div> | |
<div class="box">2 <small>shrink: 1</small></div> | |
<div class="box">3 <small>shrink: 1</small></div> | |
<div class="box">4 <small>shrink: 1</small></div> | |
<div class="box">5 <small>shrink: 1</small></div> | |
<div class="box">6 <small>shrink: 1</small></div> | |
<div class="box">7 <small>shrink: 1</small></div> | |
<div class="box">8 <small>shrink: 1</small></div> | |
<div class="box">9 <small>shrink: 1</small></div> | |
<div class="box">10 <small>shrink: 1</small></div> | |
</div> | |
<h3>Set the first 5 item shrink 2 <em>flex-shrink: 2;</em></h3> | |
<div class="container"> | |
<div class="box shrink-2">1 <small>shrink: 2</small></div> | |
<div class="box shrink-2">2 <small>shrink: 2</small></div> | |
<div class="box shrink-2">3 <small>shrink: 2</small></div> | |
<div class="box shrink-2">4 <small>shrink: 2</small></div> | |
<div class="box shrink-2">5 <small>shrink: 2</small></div> | |
<div class="box">6 <small>shrink: 1</small></div> | |
<div class="box">7 <small>shrink: 1</small></div> | |
<div class="box">8 <small>shrink: 1</small></div> | |
<div class="box">9 <small>shrink: 1</small></div> | |
<div class="box">10 <small>shrink: 1</small></div> | |
</div> | |
<br /> | |
<hr /> | |
<h2>Basis</h2> | |
<h3>Default <em>flex-basis: auto;</em></h3> | |
<div class="container"> | |
<div class="box">1 <small>basis: auto</small></div> | |
<div class="box">2 <small>basis: auto</small></div> | |
<div class="box">3 <small>basis: auto</small></div> | |
<div class="box">4 <small>basis: auto</small></div> | |
<div class="box">5 <small>basis: auto</small></div> | |
<div class="box">6 <small>basis: auto</small></div> | |
<div class="box">7 <small>basis: auto</small></div> | |
<div class="box">8 <small>basis: auto</small></div> | |
<div class="box">9 <small>basis: auto</small></div> | |
<div class="box">10 <small>basis: auto</small></div> | |
</div> | |
<h3>Set first 5 items <em>flex-basis: 0;</em></h3> | |
<div class="container"> | |
<div class="box basis-0">1</div> | |
<div class="box basis-0">2</div> | |
<div class="box basis-0">3</div> | |
<div class="box basis-0">4</div> | |
<div class="box basis-0">5</div> | |
<div class="box">6 <small>basis: auto</small></div> | |
<div class="box">7 <small>basis: auto</small></div> | |
<div class="box">8 <small>basis: auto</small></div> | |
<div class="box">9 <small>basis: auto</small></div> | |
<div class="box">10 <small>basis: auto</small></div> | |
</div> | |
<h3>Set items <em>flex-basis: 20%;</em></h3> | |
<div class="container"> | |
<div class="box basis-20-percent">1 <small>basis: 20%</small></div> | |
<div class="box basis-20-percent">2 <small>basis: 20%</small></div> | |
<div class="box basis-20-percent">3 <small>basis: 20%</small></div> | |
<div class="box basis-20-percent">4 <small>basis: 20%</small></div> | |
<div class="box basis-20-percent">5 <small>basis: 20%</small></div> | |
</div> | |
<h3> | |
Combine grow, shrink and basis | |
<em>flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]</em> | |
</h3> | |
<div class="container"> | |
<div class="box">1</div> | |
<div class="box flex-g-s-b">2 <small>flex: 2 2 auto</small></div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
</div> | |
<br /> | |
<h2>Align self</h2> | |
<h3>Default <em>align-self: auto;</em></h3> | |
<div class="container"> | |
<div class="box">1 <small>auto</small></div> | |
<div class="box">2 <small>auto</small></div> | |
<div class="box">3 <small>auto</small></div> | |
<div class="box">4 <small>auto</small></div> | |
<div class="box">5 <small>auto</small></div> | |
</div> | |
<h3>Align items flex-start, but second item <em>align-self: flex-end;</em></h3> | |
<div class="container ai-start" style="min-height: 240px; "> | |
<div class="box">1 <small>auto</small></div> | |
<div class="box as-end">2 <small>flex-end</small></div> | |
<div class="box">3 <small>auto</small></div> | |
</div> | |
<br /> | |
<hr /> | |
<h2>Align Content</h2> | |
<h3>Default <em>align-content: flex-start;</em></h3> | |
<div class="container wrap ac-start" style="height: 500px;"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
<div class="box">6</div> | |
<div class="box">7</div> | |
<div class="box">8</div> | |
<div class="box">9</div> | |
<div class="box">10</div> | |
<div class="box">11</div> | |
<div class="box">12</div> | |
<div class="box">13</div> | |
<div class="box">14</div> | |
<div class="box">15</div> | |
<div class="box">16</div> | |
<div class="box">17</div> | |
<div class="box">18</div> | |
<div class="box">19</div> | |
<div class="box">20</div> | |
</div> | |
<h3><em>align-content: flex-end;</em></h3> | |
<div class="container wrap ac-end" style="height: 500px;"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
<div class="box">6</div> | |
<div class="box">7</div> | |
<div class="box">8</div> | |
<div class="box">9</div> | |
<div class="box">10</div> | |
<div class="box">11</div> | |
<div class="box">12</div> | |
<div class="box">13</div> | |
<div class="box">14</div> | |
<div class="box">15</div> | |
<div class="box">16</div> | |
<div class="box">17</div> | |
<div class="box">18</div> | |
<div class="box">19</div> | |
<div class="box">20</div> | |
</div> | |
<h3><em>align-content: center;</em></h3> | |
<div class="container wrap ac-center" style="height: 500px;"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
<div class="box">6</div> | |
<div class="box">7</div> | |
<div class="box">8</div> | |
<div class="box">9</div> | |
<div class="box">10</div> | |
<div class="box">11</div> | |
<div class="box">12</div> | |
<div class="box">13</div> | |
<div class="box">14</div> | |
<div class="box">15</div> | |
<div class="box">16</div> | |
<div class="box">17</div> | |
<div class="box">18</div> | |
<div class="box">19</div> | |
<div class="box">20</div> | |
</div> | |
<h3><em>align-content: stretch;</em></h3> | |
<div class="container wrap ac-stretch" style="height: 500px;"> | |
<div class="box" style="height: auto;">1</div> | |
<div class="box" style="height: auto;">2</div> | |
<div class="box" style="height: auto;">3</div> | |
<div class="box" style="height: auto;">4</div> | |
<div class="box" style="height: auto;">5</div> | |
<div class="box" style="height: auto;">6</div> | |
<div class="box" style="height: auto;">7</div> | |
<div class="box" style="height: auto;">8</div> | |
<div class="box" style="height: auto;">9</div> | |
<div class="box" style="height: auto;">10</div> | |
<div class="box" style="height: auto;">11</div> | |
<div class="box" style="height: auto;">12</div> | |
<div class="box" style="height: auto;">13</div> | |
<div class="box" style="height: auto;">14</div> | |
<div class="box" style="height: auto;">15</div> | |
<div class="box" style="height: auto;">16</div> | |
<div class="box" style="height: auto;">17</div> | |
<div class="box" style="height: auto;">18</div> | |
<div class="box" style="height: auto;">19</div> | |
<div class="box" style="height: auto;">20</div> | |
</div> | |
<h3><em>align-content: space-between;</em></h3> | |
<div class="container wrap ac-between" style="height: 500px;"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
<div class="box">6</div> | |
<div class="box">7</div> | |
<div class="box">8</div> | |
<div class="box">9</div> | |
<div class="box">10</div> | |
<div class="box">11</div> | |
<div class="box">12</div> | |
<div class="box">13</div> | |
<div class="box">14</div> | |
<div class="box">15</div> | |
<div class="box">16</div> | |
<div class="box">17</div> | |
<div class="box">18</div> | |
<div class="box">19</div> | |
<div class="box">20</div> | |
</div> | |
<h3><em>align-content: space-around;</em></h3> | |
<div class="container wrap ac-around" style="height: 500px;"> | |
<div class="box">1</div> | |
<div class="box">2</div> | |
<div class="box">3</div> | |
<div class="box">4</div> | |
<div class="box">5</div> | |
<div class="box">6</div> | |
<div class="box">7</div> | |
<div class="box">8</div> | |
<div class="box">9</div> | |
<div class="box">10</div> | |
<div class="box">11</div> | |
<div class="box">12</div> | |
<div class="box">13</div> | |
<div class="box">14</div> | |
<div class="box">15</div> | |
<div class="box">16</div> | |
<div class="box">17</div> | |
<div class="box">18</div> | |
<div class="box">19</div> | |
<div class="box">20</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment