Created
December 17, 2015 14:36
-
-
Save df2k2/c2dbdd0d421b539cddf9 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Flexbox Sample</title> | |
| <link rel="stylesheet" type="text/css" href="flexbox.css"> | |
| </head> | |
| <body> | |
| <header class="box"> | |
| <div class="header-name"> | |
| Header | |
| </div> | |
| <nav>navigation</nav> | |
| </header> | |
| <section id="" class=''> | |
| <main id="content"> | |
| <div class="flex-container"> | |
| <div class="flex-row bg-3"> | |
| <div class="flex-item-1"> | |
| <img class="img-responsive" src="http://shop.zebcobrands.com/media/catalog/product/cache/1/image/300x/9df78eab33525d08d6e5fb8d27136e95/3/3/33MCK.04C.BX61_44.jpg"> | |
| </div> | |
| <div class="flex-item-9 bg-4"> | |
| <div class="flex-row bg-5"> | |
| Top Row | |
| </div> | |
| <div class="flex-row bg-5"> | |
| <div class="flex-item-9 bg-4 "> | |
| <div class="flex-row bg-1"> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| </div> | |
| <div class="flex-row bg-1"> | |
| Row 2 | |
| </div> | |
| <div class="flex-row bg-1"> | |
| Row 3 | |
| </div> | |
| <div class="flex-row bg-1"> | |
| Row 4 | |
| </div> | |
| </div> | |
| <div class='flex-item-1 bg-6 p-a'> | |
| fdg fdg fdg fdg fdg fdg fdg fdg | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-row bg-4">T</div> | |
| </div> | |
| </main> | |
| <aside>aside</aside> | |
| </section> | |
| <footer>footer</footer> | |
| </body> | |
| </html> |
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
| // ---- | |
| // Sass (v3.4.20) | |
| // Compass (v1.0.3) | |
| // Bourbon (v4.2.6) | |
| // Neat (v1.6.0) | |
| // ---- | |
| @import "compass"; | |
| @import "compass/css3"; | |
| @import "bourbon/bourbon"; | |
| @import "neat/neat"; | |
| .flex-container { | |
| display: flex; | |
| flex-direction: column; | |
| flex-wrap: wrap; | |
| justify-content: flex-start; | |
| align-content: flex-start; | |
| align-items: flex-start; | |
| > .flex-row { | |
| margin: 0 0 1rem 0; | |
| } | |
| .flex-row { | |
| //padding: 0.25rem; | |
| //margin: 0.25rem 0 0 0; | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: nowrap; | |
| justify-content: flex-start; | |
| align-content: flex-start; | |
| align-items: flex-start; | |
| flex: 1 1 100%; | |
| align-self:stretch; | |
| .flex-item-1 { | |
| order: 0; | |
| flex: 1 1 10%; | |
| align-self: flex-start; | |
| flex-wrap:wrap; | |
| } | |
| .flex-item-9 { | |
| flex-wrap:wrap; | |
| order: 0; | |
| flex: 1 1 90%; | |
| align-self: stretch; | |
| } | |
| .flex-item-2 { | |
| flex-wrap:wrap; | |
| order: 0; | |
| flex: 1 1 20%; | |
| align-self: stretch; | |
| } | |
| .flex-row { | |
| //margin: 0.5rem; | |
| .flex-item-1 { | |
| text-align:center; | |
| } | |
| } | |
| } | |
| } | |
| div { | |
| padding:0.50rem; | |
| } | |
| div div div { | |
| margin:0.25rem; | |
| } | |
| .p-0 { | |
| padding:0 !important; | |
| } | |
| .p-a { | |
| padding: 0.75rem !important; | |
| } | |
| @mixin flex-start() { | |
| justify-content: flex-start; | |
| align-content: flex-start; | |
| align-items: flex-start; | |
| } | |
| /* | |
| .parent { | |
| @include align-items(stretch); | |
| @include flex(flex); | |
| @include flex-direction(row); | |
| @include justify-content(flex-start); | |
| background:#ddd; | |
| } | |
| /* | |
| .flex-container { | |
| display: flex; | |
| @include flex-direction(row);//flex-direction: row; | |
| @include flex-wrap(wrap); //flex-wrap: @include flex-wrap; | |
| @include justify-content(flex-start); //justify-content: flex-start; | |
| @include align-content(stretch); | |
| @include align-items(flex-start);//align-items: flex-start; | |
| }*/ | |
| /* | |
| .header-name { | |
| -webkit-order: 0; | |
| -ms-flex-order: 0; | |
| order: 0; | |
| -webkit-flex: 2 1 auto; | |
| -ms-flex: 2 1 auto; | |
| flex: 2 1 auto; | |
| -webkit-align-self: auto; | |
| -ms-flex-item-align: auto; | |
| align-self: auto; | |
| } | |
| .flex-container { | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: flex; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-flex-wrap: no-wrap; | |
| -ms-flex-wrap: no-wrap; | |
| flex-wrap: no-wrap; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -webkit-align-content: flex-start; | |
| -ms-flex-line-pack: start; | |
| align-content: flex-start; | |
| -webkit-align-items: flex-start; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| } | |
| */ | |
| /* | |
| .flex-container > .a-flex-item { | |
| -webkit-order: 0; | |
| -ms-flex-order: 0; | |
| order: 0; | |
| -webkit-flex: 1 0 auto; | |
| -ms-flex: 1 0 auto; | |
| flex: 1 0 auto; | |
| -webkit-align-self: stretch; | |
| -ms-flex-item-align: stretch; | |
| align-self: stretch; | |
| } | |
| */ | |
| $bg: #efefef; | |
| .bg-1 { | |
| background:$bg; | |
| $bg: darken($bg,10%) !global; | |
| } | |
| .bg-2 { | |
| background:$bg; | |
| $bg: darken($bg,10%) !global; | |
| } | |
| .bg-3 { | |
| background:$bg; | |
| $bg: darken($bg,10%) !global; | |
| } | |
| .bg-4 { | |
| background:$bg; | |
| $bg: darken($bg,10%) !global; | |
| } | |
| .bg-5 { | |
| background:$bg; | |
| $bg: darken($bg,10%) !global; | |
| } | |
| .bg-6 { | |
| background:$bg; | |
| $bg: darken($bg,10%) !global; | |
| } | |
| /* | |
| .inner-flex-container { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| justify-content: flex-start; | |
| align-content: center; | |
| align-items: center; | |
| .flex-item:nth-child(1) { | |
| -webkit-order: 0; | |
| -ms-flex-order: 0; | |
| order: 0; | |
| -webkit-flex: 3 0 auto; | |
| -ms-flex: 3 0 auto; | |
| flex: 3 0 auto; | |
| -webkit-align-self: stretch; | |
| -ms-flex-item-align: stretch; | |
| align-self: stretch; | |
| background:#9d0000; | |
| } | |
| .flex-item:nth-child(2) { | |
| -webkit-order: 0; | |
| -ms-flex-order: 0; | |
| order: 0; | |
| -webkit-flex: 12 0 auto; | |
| -ms-flex: 12 0 auto; | |
| flex: 12 0 auto; | |
| -webkit-align-self: stretch; | |
| -ms-flex-item-align: stretch; | |
| align-self: stretch; | |
| } | |
| .flex-item:nth-child(3) { | |
| order: 0; | |
| flex: 2 1 auto; | |
| align-self: stretch; | |
| padding:0.5rem; | |
| text-align:center; | |
| } | |
| .flex-item:nth-child(4) { | |
| order: 0; | |
| flex: 4 1 auto; | |
| align-self: stretch; | |
| padding:0.5rem; | |
| text-align:center; | |
| } | |
| } | |
| .flex-col-container { | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: flex; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -webkit-justify-content: flex-start; | |
| -ms-flex-pack: start; | |
| justify-content: flex-start; | |
| -webkit-align-content: flex-start; | |
| -ms-flex-line-pack: start; | |
| align-content: flex-start; | |
| -webkit-align-items: flex-start; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| .flex-item-inner { | |
| padding: 0.5rem; | |
| &:nth-child(1) { | |
| order: 0; | |
| flex: 1 0 auto; | |
| align-self: stretch; | |
| } | |
| } | |
| .flex-item-inner:nth-child(2) { | |
| order: 0; | |
| flex: 2 0 auto; | |
| align-self: stretch; | |
| } | |
| .flex-item-inner:nth-child(3) { | |
| order: 0; | |
| flex: 1 0 auto; | |
| align-self: stretch; | |
| } | |
| } | |
| */ | |
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
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .flex-container { | |
| display: flex; | |
| flex-direction: column; | |
| flex-wrap: wrap; | |
| justify-content: flex-start; | |
| align-content: flex-start; | |
| align-items: flex-start; | |
| } | |
| .flex-container > .flex-row { | |
| margin: 0 0 1rem 0; | |
| } | |
| .flex-container .flex-row { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: nowrap; | |
| justify-content: flex-start; | |
| align-content: flex-start; | |
| align-items: flex-start; | |
| flex: 1 1 100%; | |
| align-self: stretch; | |
| } | |
| .flex-container .flex-row .flex-item-1 { | |
| order: 0; | |
| flex: 1 1 10%; | |
| align-self: flex-start; | |
| flex-wrap: wrap; | |
| } | |
| .flex-container .flex-row .flex-item-9 { | |
| flex-wrap: wrap; | |
| order: 0; | |
| flex: 1 1 90%; | |
| align-self: stretch; | |
| } | |
| .flex-container .flex-row .flex-item-2 { | |
| flex-wrap: wrap; | |
| order: 0; | |
| flex: 1 1 20%; | |
| align-self: stretch; | |
| } | |
| .flex-container .flex-row .flex-row .flex-item-1 { | |
| text-align: center; | |
| } | |
| div { | |
| padding: 0.50rem; | |
| } | |
| div div div { | |
| margin: 0.25rem; | |
| } | |
| .p-0 { | |
| padding: 0 !important; | |
| } | |
| .p-a { | |
| padding: 0.75rem !important; | |
| } | |
| /* | |
| .parent { | |
| @include align-items(stretch); | |
| @include flex(flex); | |
| @include flex-direction(row); | |
| @include justify-content(flex-start); | |
| background:#ddd; | |
| } | |
| /* | |
| .flex-container { | |
| display: flex; | |
| @include flex-direction(row);//flex-direction: row; | |
| @include flex-wrap(wrap); //flex-wrap: @include flex-wrap; | |
| @include justify-content(flex-start); //justify-content: flex-start; | |
| @include align-content(stretch); | |
| @include align-items(flex-start);//align-items: flex-start; | |
| }*/ | |
| /* | |
| .header-name { | |
| -webkit-order: 0; | |
| -ms-flex-order: 0; | |
| order: 0; | |
| -webkit-flex: 2 1 auto; | |
| -ms-flex: 2 1 auto; | |
| flex: 2 1 auto; | |
| -webkit-align-self: auto; | |
| -ms-flex-item-align: auto; | |
| align-self: auto; | |
| } | |
| .flex-container { | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: flex; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-flex-wrap: no-wrap; | |
| -ms-flex-wrap: no-wrap; | |
| flex-wrap: no-wrap; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -webkit-align-content: flex-start; | |
| -ms-flex-line-pack: start; | |
| align-content: flex-start; | |
| -webkit-align-items: flex-start; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| } | |
| */ | |
| /* | |
| .flex-container > .a-flex-item { | |
| -webkit-order: 0; | |
| -ms-flex-order: 0; | |
| order: 0; | |
| -webkit-flex: 1 0 auto; | |
| -ms-flex: 1 0 auto; | |
| flex: 1 0 auto; | |
| -webkit-align-self: stretch; | |
| -ms-flex-item-align: stretch; | |
| align-self: stretch; | |
| } | |
| */ | |
| .bg-1 { | |
| background: #efefef; | |
| } | |
| .bg-2 { | |
| background: #d6d6d6; | |
| } | |
| .bg-3 { | |
| background: #bcbcbc; | |
| } | |
| .bg-4 { | |
| background: #a3a3a3; | |
| } | |
| .bg-5 { | |
| background: #898989; | |
| } | |
| .bg-6 { | |
| background: #707070; | |
| } | |
| /* | |
| .inner-flex-container { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| justify-content: flex-start; | |
| align-content: center; | |
| align-items: center; | |
| .flex-item:nth-child(1) { | |
| -webkit-order: 0; | |
| -ms-flex-order: 0; | |
| order: 0; | |
| -webkit-flex: 3 0 auto; | |
| -ms-flex: 3 0 auto; | |
| flex: 3 0 auto; | |
| -webkit-align-self: stretch; | |
| -ms-flex-item-align: stretch; | |
| align-self: stretch; | |
| background:#9d0000; | |
| } | |
| .flex-item:nth-child(2) { | |
| -webkit-order: 0; | |
| -ms-flex-order: 0; | |
| order: 0; | |
| -webkit-flex: 12 0 auto; | |
| -ms-flex: 12 0 auto; | |
| flex: 12 0 auto; | |
| -webkit-align-self: stretch; | |
| -ms-flex-item-align: stretch; | |
| align-self: stretch; | |
| } | |
| .flex-item:nth-child(3) { | |
| order: 0; | |
| flex: 2 1 auto; | |
| align-self: stretch; | |
| padding:0.5rem; | |
| text-align:center; | |
| } | |
| .flex-item:nth-child(4) { | |
| order: 0; | |
| flex: 4 1 auto; | |
| align-self: stretch; | |
| padding:0.5rem; | |
| text-align:center; | |
| } | |
| } | |
| .flex-col-container { | |
| display: -ms-flexbox; | |
| display: -webkit-flex; | |
| display: flex; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -webkit-justify-content: flex-start; | |
| -ms-flex-pack: start; | |
| justify-content: flex-start; | |
| -webkit-align-content: flex-start; | |
| -ms-flex-line-pack: start; | |
| align-content: flex-start; | |
| -webkit-align-items: flex-start; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| .flex-item-inner { | |
| padding: 0.5rem; | |
| &:nth-child(1) { | |
| order: 0; | |
| flex: 1 0 auto; | |
| align-self: stretch; | |
| } | |
| } | |
| .flex-item-inner:nth-child(2) { | |
| order: 0; | |
| flex: 2 0 auto; | |
| align-self: stretch; | |
| } | |
| .flex-item-inner:nth-child(3) { | |
| order: 0; | |
| flex: 1 0 auto; | |
| align-self: stretch; | |
| } | |
| } | |
| */ |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Flexbox Sample</title> | |
| <link rel="stylesheet" type="text/css" href="flexbox.css"> | |
| </head> | |
| <body> | |
| <header class="box"> | |
| <div class="header-name"> | |
| Header | |
| </div> | |
| <nav>navigation</nav> | |
| </header> | |
| <section id="" class=''> | |
| <main id="content"> | |
| <div class="flex-container"> | |
| <div class="flex-row bg-3"> | |
| <div class="flex-item-1"> | |
| <img class="img-responsive" src="http://shop.zebcobrands.com/media/catalog/product/cache/1/image/300x/9df78eab33525d08d6e5fb8d27136e95/3/3/33MCK.04C.BX61_44.jpg"> | |
| </div> | |
| <div class="flex-item-9 bg-4"> | |
| <div class="flex-row bg-5"> | |
| Top Row | |
| </div> | |
| <div class="flex-row bg-5"> | |
| <div class="flex-item-9 bg-4 "> | |
| <div class="flex-row bg-1"> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| <div class="flex-item-1 bg-2"> | |
| 1 | |
| </div> | |
| </div> | |
| <div class="flex-row bg-1"> | |
| Row 2 | |
| </div> | |
| <div class="flex-row bg-1"> | |
| Row 3 | |
| </div> | |
| <div class="flex-row bg-1"> | |
| Row 4 | |
| </div> | |
| </div> | |
| <div class='flex-item-1 bg-6 p-a'> | |
| fdg fdg fdg fdg fdg fdg fdg fdg | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-row bg-4">T</div> | |
| </div> | |
| </main> | |
| <aside>aside</aside> | |
| </section> | |
| <footer>footer</footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment