Last active
December 17, 2015 18:19
-
-
Save df2k2/6fc084d638a0169d837d 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> | |
| <div class="flex-container"> | |
| <div class="flex-row"> | |
| <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"> | |
| <div class="flex-row bg-5"> | |
| <div class="flex-item-9 bg-4">Top Row</div> | |
| </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 class="flex-row p-0"> | |
| <div class='flex-item-5 bg-6 p-a m-0'> | |
| This | |
| break | |
| <br> | |
| And Another line | |
| </div> | |
| <div class='flex-item-5 bg-5 p-a m-0'> | |
| This | |
| </div> | |
| </div> | |
| <div class="flex-row bg-1"> | |
| Last Row | |
| </div> | |
| </div> | |
| <div class='flex-item-1 bg-6 '> | |
| <div class='flex-item-1 bg-2 '> | |
| fdg fdg fdg fdg fdg fdg fdg fdg | |
| </div> | |
| <div class='flex-item-1 bg-2 m-t-sm'> | |
| fdg fdg fdg fdg fdg fdg fdg fdg | |
| </div> | |
| <div class='flex-item-1 bg-2 m-t-sm'> | |
| fdg fdg fdg fdg fdg fdg fdg fdg | |
| </div> | |
| <div class='flex-item-1 bg-2 m-t-sm'> | |
| fdg fdg fdg fdg fdg fdg fdg fdg | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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"; | |
| // CSS3 Flexible Box Model and property defaults | |
| // Unified attributes for 2009, 2011, and 2012 flavours. | |
| // 2009 - display (box | inline-box) | |
| // 2011 - display (flexbox | inline-flexbox) | |
| // 2012 - display (flex | inline-flex) | |
| @mixin display($value) { | |
| // flex | inline-flex | |
| @if $value == "flex" { | |
| // 2009 | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: box; | |
| // 2012 | |
| display: -webkit-flex; | |
| display: -moz-flex; | |
| display: -ms-flexbox; // 2011 (IE 10) | |
| display: flex; | |
| } @else if $value == "inline-flex" { | |
| display: -webkit-inline-box; | |
| display: -moz-inline-box; | |
| display: inline-box; | |
| display: -webkit-inline-flex; | |
| display: -moz-inline-flex; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| } @else { | |
| display: $value; | |
| } | |
| } | |
| @mixin flex-start() { | |
| @include justify-content(flex-start); | |
| @include align-content(flex-start); | |
| @include align-items(flex-start); | |
| } | |
| .img-responsive, .img-fluid { width:100%; } | |
| .flex-container { | |
| @include display(flex); | |
| @include flex-direction(column); | |
| @include flex-wrap(wrap); | |
| //flex-wrap: wrap; | |
| @include flex-start(); | |
| > .flex-row { | |
| margin: 0 0 1rem 0; | |
| } | |
| .flex-row { | |
| //padding: 0.25rem; | |
| //margin: 0.25rem 0 0 0; | |
| @include display(flex); | |
| @include flex-direction(row); | |
| //flex-direction: row; | |
| @include flex-wrap(nowrap); | |
| //flex-wrap: nowrap; | |
| @include flex-start(); | |
| @include flex(1 1 100%); | |
| @include align-self(stretch); | |
| //align-self:stretch; | |
| .flex-item-1 { | |
| display:inline-block; | |
| @include order(0); | |
| @include flex(1 1 10%); | |
| @include align-self(flex-start); | |
| //align-self: flex-start; | |
| @include flex-wrap(wrap); | |
| //flex-wrap:wrap; | |
| } | |
| .flex-item-9 { | |
| @include flex-wrap(wrap); | |
| @include order(0); | |
| @include flex(1 1 90%); | |
| @include align-self(stretch); | |
| } | |
| .flex-item-2 { | |
| display:inline-block; | |
| @include flex-wrap(wrap); | |
| @include order(0); | |
| @include flex(1 1 20%); | |
| @include align-self(stretch); | |
| } | |
| .flex-wrap { | |
| @include flex-wrap(wrap); | |
| } | |
| .flex-no-wrap { | |
| @include flex-wrap(nowrap); | |
| } | |
| .flex-stretch { | |
| //@include flex(1 1 auto); | |
| @include align-self(stretch); | |
| } | |
| .flex-row { | |
| //margin: 0.5rem; | |
| .flex-item-1 { | |
| text-align:center; | |
| } | |
| } | |
| } | |
| .flex-row-col { | |
| //padding: 0.25rem; | |
| //margin: 0.25rem 0 0 0; | |
| @include display(flex); | |
| @include flex-direction(column); | |
| //flex-direction: row; | |
| @include flex-wrap(nowrap); | |
| //flex-wrap: nowrap; | |
| @include flex-start(); | |
| @include flex(1 1 auto); | |
| @include align-self(flex-start); | |
| //align-self:stretch; | |
| } | |
| .flex-item-5 { | |
| display:inline-block; | |
| @include order(0); | |
| @include flex(1 1 20%); | |
| @include align-self(stretch); | |
| //align-self: flex-start; | |
| @include flex-wrap(nowrap); | |
| //flex-wrap:wrap; | |
| } | |
| } | |
| div { | |
| padding:0.50rem; | |
| } | |
| div div div { | |
| margin:0.25rem; | |
| } | |
| .m-0 { | |
| margin:0 !important; | |
| } | |
| .p-0 { | |
| padding:0 !important; | |
| } | |
| .p-a { | |
| padding: 0.75rem !important; | |
| } | |
| .m-t-sm { | |
| margin-top:0.25rem; | |
| } | |
| /* | |
| .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; | |
| } | |
| .img-responsive, .img-fluid { | |
| width: 100%; | |
| } | |
| .flex-container { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: box; | |
| display: -webkit-flex; | |
| display: -moz-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -webkit-justify-content: flex-start; | |
| justify-content: flex-start; | |
| -webkit-align-content: flex-start; | |
| align-content: flex-start; | |
| -webkit-align-items: flex-start; | |
| align-items: flex-start; | |
| } | |
| .flex-container > .flex-row { | |
| margin: 0 0 1rem 0; | |
| } | |
| .flex-container .flex-row { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: box; | |
| display: -webkit-flex; | |
| display: -moz-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -webkit-justify-content: flex-start; | |
| justify-content: flex-start; | |
| -webkit-align-content: flex-start; | |
| align-content: flex-start; | |
| -webkit-align-items: flex-start; | |
| align-items: flex-start; | |
| -webkit-flex: 1 1 100%; | |
| flex: 1 1 100%; | |
| -webkit-align-self: stretch; | |
| align-self: stretch; | |
| } | |
| .flex-container .flex-row .flex-item-1 { | |
| display: inline-block; | |
| -webkit-order: 0; | |
| order: 0; | |
| -webkit-flex: 1 1 10%; | |
| flex: 1 1 10%; | |
| -webkit-align-self: flex-start; | |
| align-self: flex-start; | |
| -webkit-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| } | |
| .flex-container .flex-row .flex-item-9 { | |
| -webkit-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -webkit-order: 0; | |
| order: 0; | |
| -webkit-flex: 1 1 90%; | |
| flex: 1 1 90%; | |
| -webkit-align-self: stretch; | |
| align-self: stretch; | |
| } | |
| .flex-container .flex-row .flex-item-2 { | |
| display: inline-block; | |
| -webkit-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -webkit-order: 0; | |
| order: 0; | |
| -webkit-flex: 1 1 20%; | |
| flex: 1 1 20%; | |
| -webkit-align-self: stretch; | |
| align-self: stretch; | |
| } | |
| .flex-container .flex-row .flex-wrap { | |
| -webkit-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| } | |
| .flex-container .flex-row .flex-no-wrap { | |
| -webkit-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| } | |
| .flex-container .flex-row .flex-stretch { | |
| -webkit-align-self: stretch; | |
| align-self: stretch; | |
| } | |
| .flex-container .flex-row .flex-row .flex-item-1 { | |
| text-align: center; | |
| } | |
| .flex-container .flex-row-col { | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: box; | |
| display: -webkit-flex; | |
| display: -moz-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -webkit-justify-content: flex-start; | |
| justify-content: flex-start; | |
| -webkit-align-content: flex-start; | |
| align-content: flex-start; | |
| -webkit-align-items: flex-start; | |
| align-items: flex-start; | |
| -webkit-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| -webkit-align-self: flex-start; | |
| align-self: flex-start; | |
| } | |
| .flex-container .flex-item-5 { | |
| display: inline-block; | |
| -webkit-order: 0; | |
| order: 0; | |
| -webkit-flex: 1 1 20%; | |
| flex: 1 1 20%; | |
| -webkit-align-self: stretch; | |
| align-self: stretch; | |
| -webkit-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| } | |
| div { | |
| padding: 0.50rem; | |
| } | |
| div div div { | |
| margin: 0.25rem; | |
| } | |
| .m-0 { | |
| margin: 0 !important; | |
| } | |
| .p-0 { | |
| padding: 0 !important; | |
| } | |
| .p-a { | |
| padding: 0.75rem !important; | |
| } | |
| .m-t-sm { | |
| margin-top: 0.25rem; | |
| } | |
| /* | |
| .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> | |
| <div class="flex-container"> | |
| <div class="flex-row"> | |
| <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"> | |
| <div class="flex-row bg-5"> | |
| <div class="flex-item-9 bg-4">Top Row</div> | |
| </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 class="flex-row p-0"> | |
| <div class='flex-item-5 bg-6 p-a m-0'> | |
| This | |
| break | |
| <br> | |
| And Another line | |
| </div> | |
| <div class='flex-item-5 bg-5 p-a m-0'> | |
| This | |
| </div> | |
| </div> | |
| <div class="flex-row bg-1"> | |
| Last Row | |
| </div> | |
| </div> | |
| <div class='flex-item-1 bg-6 '> | |
| <div class='flex-item-1 bg-2 '> | |
| fdg fdg fdg fdg fdg fdg fdg fdg | |
| </div> | |
| <div class='flex-item-1 bg-2 m-t-sm'> | |
| fdg fdg fdg fdg fdg fdg fdg fdg | |
| </div> | |
| <div class='flex-item-1 bg-2 m-t-sm'> | |
| fdg fdg fdg fdg fdg fdg fdg fdg | |
| </div> | |
| <div class='flex-item-1 bg-2 m-t-sm'> | |
| fdg fdg fdg fdg fdg fdg fdg fdg | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment