Skip to content

Instantly share code, notes, and snippets.

@Codyzhao
Last active September 14, 2019 11:00
Show Gist options
  • Save Codyzhao/9a9bb4827a86204de02f21ee74d80d76 to your computer and use it in GitHub Desktop.
Save Codyzhao/9a9bb4827a86204de02f21ee74d80d76 to your computer and use it in GitHub Desktop.
Untitled
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;
}
}
<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>
// alert('Hello world!');
{"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