flex.stylus/dist/flex.tiny.min.css

flex+栅格系统

.flex{display:flex;flex-direction:row;height:100%;width:100%;}.flex .offset-1{margin-left:8%}.flex >.gutter-1{padding-left:.5px;padding-right:.5px}.flex.gutters-1 >.span-1{padding:0 .5px}.flex.gutters-1 >.span-2{padding:0 .5px}.flex.gutters-1 >.span-3{padding:0 .5px}.flex.gutters-1 >.span-4{padding:0 .5px}.flex.gutters-1 >.span-5{padding:0 .5px}.flex.gutters-1 >.span-6{padding:0 .5px}.flex.gutters-1 >.span-8{padding:0 .5px}.flex.gutters-1 >.span-10{padding:0 .5px}.flex.gutters-1 >.span-12{padding:0 .5px}.flex .offset-2{margin-left:17%}.flex >.gutter-2{padding-left:1px;padding-right:1px}.flex.gutters-2 >.span-1{padding:0 1px}.flex.gutters-2 >.span-2{padding:0 1px}.flex.gutters-2 >.span-3{padding:0 1px}.flex.gutters-2 >.span-4{padding:0 1px}.flex.gutters-2 >.span-5{padding:0 1px}.flex.gutters-2 >.span-6{padding:0 1px}.flex.gutters-2 >.span-8{padding:0 1px}.flex.gutters-2 >.span-10{padding:0 1px}.flex.gutters-2 >.span-12{padding:0 1px}.flex .offset-3{margin-left:25%}.flex >.gutter-3{padding-left:1.5px;padding-right:1.5px}.flex.gutters-3 >.span-1{padding:0 1.5px}.flex.gutters-3 >.span-2{padding:0 1.5px}.flex.gutters-3 >.span-3{padding:0 1.5px}.flex.gutters-3 >.span-4{padding:0 1.5px}.flex.gutters-3 >.span-5{padding:0 1.5px}.flex.gutters-3 >.span-6{padding:0 1.5px}.flex.gutters-3 >.span-8{padding:0 1.5px}.flex.gutters-3 >.span-10{padding:0 1.5px}.flex.gutters-3 >.span-12{padding:0 1.5px}.flex .offset-4{margin-left:33%}.flex >.gutter-4{padding-left:2px;padding-right:2px}.flex.gutters-4 >.span-1{padding:0 2px}.flex.gutters-4 >.span-2{padding:0 2px}.flex.gutters-4 >.span-3{padding:0 2px}.flex.gutters-4 >.span-4{padding:0 2px}.flex.gutters-4 >.span-5{padding:0 2px}.flex.gutters-4 >.span-6{padding:0 2px}.flex.gutters-4 >.span-8{padding:0 2px}.flex.gutters-4 >.span-10{padding:0 2px}.flex.gutters-4 >.span-12{padding:0 2px}.flex .offset-5{margin-left:42%}.flex >.gutter-5{padding-left:2.5px;padding-right:2.5px}.flex.gutters-5 >.span-1{padding:0 2.5px}.flex.gutters-5 >.span-2{padding:0 2.5px}.flex.gutters-5 >.span-3{padding:0 2.5px}.flex.gutters-5 >.span-4{padding:0 2.5px}.flex.gutters-5 >.span-5{padding:0 2.5px}.flex.gutters-5 >.span-6{padding:0 2.5px}.flex.gutters-5 >.span-8{padding:0 2.5px}.flex.gutters-5 >.span-10{padding:0 2.5px}.flex.gutters-5 >.span-12{padding:0 2.5px}.flex .offset-6{margin-left:50%}.flex >.gutter-6{padding-left:3px;padding-right:3px}.flex.gutters-6 >.span-1{padding:0 3px}.flex.gutters-6 >.span-2{padding:0 3px}.flex.gutters-6 >.span-3{padding:0 3px}.flex.gutters-6 >.span-4{padding:0 3px}.flex.gutters-6 >.span-5{padding:0 3px}.flex.gutters-6 >.span-6{padding:0 3px}.flex.gutters-6 >.span-8{padding:0 3px}.flex.gutters-6 >.span-10{padding:0 3px}.flex.gutters-6 >.span-12{padding:0 3px}.flex .offset-8{margin-left:67%}.flex >.gutter-8{padding-left:4px;padding-right:4px}.flex.gutters-8 >.span-1{padding:0 4px}.flex.gutters-8 >.span-2{padding:0 4px}.flex.gutters-8 >.span-3{padding:0 4px}.flex.gutters-8 >.span-4{padding:0 4px}.flex.gutters-8 >.span-5{padding:0 4px}.flex.gutters-8 >.span-6{padding:0 4px}.flex.gutters-8 >.span-8{padding:0 4px}.flex.gutters-8 >.span-10{padding:0 4px}.flex.gutters-8 >.span-12{padding:0 4px}.flex .offset-10{margin-left:83%}.flex >.gutter-10{padding-left:5px;padding-right:5px}.flex.gutters-10 >.span-1{padding:0 5px}.flex.gutters-10 >.span-2{padding:0 5px}.flex.gutters-10 >.span-3{padding:0 5px}.flex.gutters-10 >.span-4{padding:0 5px}.flex.gutters-10 >.span-5{padding:0 5px}.flex.gutters-10 >.span-6{padding:0 5px}.flex.gutters-10 >.span-8{padding:0 5px}.flex.gutters-10 >.span-10{padding:0 5px}.flex.gutters-10 >.span-12{padding:0 5px}.flex .offset-12{margin-left:100%}.flex >.gutter-12{padding-left:6px;padding-right:6px}.flex.gutters-12 >.span-1{padding:0 6px}.flex.gutters-12 >.span-2{padding:0 6px}.flex.gutters-12 >.span-3{padding:0 6px}.flex.gutters-12 >.span-4{padding:0 6px}.flex.gutters-12 >.span-5{padding:0 6px}.flex.gutters-12 >.span-6{padding:0 6px}.flex.gutters-12 >.span-8{padding:0 6px}.flex.gutters-12 >.span-10{padding:0 6px}.flex.gutters-12 >.span-12{padding:0 6px}.flex.wrap-reverse{flex-wrap:wrap-reverse}.flex.wrap{flex-wrap:wrap}.flex.start{justify-content:flex-start}.flex.end{justify-content:flex-end}.flex.center{justify-content:center}.flex.between{justify-content:space-between}.flex.around{justify-content:space-around}.flex.top{align-items:flex-start}.flex.bottom{align-items:flex-end}.flex.middle{align-items:center}.flex.baseline{align-items:baseline}.flex.stretch{align-items:stretch}.flex.vertical{flex-direction:column;}.flex.vertical .offset-1{margin-top:8%}.flex.vertical >.gutter-1{padding-top:.5px;padding-bottom:.5px}.flex.vertical.gutters-1 >.span-1{padding:.5px 0}.flex.vertical.gutters-1 >.span-2{padding:.5px 0}.flex.vertical.gutters-1 >.span-3{padding:.5px 0}.flex.vertical.gutters-1 >.span-4{padding:.5px 0}.flex.vertical.gutters-1 >.span-5{padding:.5px 0}.flex.vertical.gutters-1 >.span-6{padding:.5px 0}.flex.vertical.gutters-1 >.span-8{padding:.5px 0}.flex.vertical.gutters-1 >.span-10{padding:.5px 0}.flex.vertical.gutters-1 >.span-12{padding:.5px 0}.flex.vertical .offset-2{margin-top:17%}.flex.vertical >.gutter-2{padding-top:1px;padding-bottom:1px}.flex.vertical.gutters-2 >.span-1{padding:1px 0}.flex.vertical.gutters-2 >.span-2{padding:1px 0}.flex.vertical.gutters-2 >.span-3{padding:1px 0}.flex.vertical.gutters-2 >.span-4{padding:1px 0}.flex.vertical.gutters-2 >.span-5{padding:1px 0}.flex.vertical.gutters-2 >.span-6{padding:1px 0}.flex.vertical.gutters-2 >.span-8{padding:1px 0}.flex.vertical.gutters-2 >.span-10{padding:1px 0}.flex.vertical.gutters-2 >.span-12{padding:1px 0}.flex.vertical .offset-3{margin-top:25%}.flex.vertical >.gutter-3{padding-top:1.5px;padding-bottom:1.5px}.flex.vertical.gutters-3 >.span-1{padding:1.5px 0}.flex.vertical.gutters-3 >.span-2{padding:1.5px 0}.flex.vertical.gutters-3 >.span-3{padding:1.5px 0}.flex.vertical.gutters-3 >.span-4{padding:1.5px 0}.flex.vertical.gutters-3 >.span-5{padding:1.5px 0}.flex.vertical.gutters-3 >.span-6{padding:1.5px 0}.flex.vertical.gutters-3 >.span-8{padding:1.5px 0}.flex.vertical.gutters-3 >.span-10{padding:1.5px 0}.flex.vertical.gutters-3 >.span-12{padding:1.5px 0}.flex.vertical .offset-4{margin-top:33%}.flex.vertical >.gutter-4{padding-top:2px;padding-bottom:2px}.flex.vertical.gutters-4 >.span-1{padding:2px 0}.flex.vertical.gutters-4 >.span-2{padding:2px 0}.flex.vertical.gutters-4 >.span-3{padding:2px 0}.flex.vertical.gutters-4 >.span-4{padding:2px 0}.flex.vertical.gutters-4 >.span-5{padding:2px 0}.flex.vertical.gutters-4 >.span-6{padding:2px 0}.flex.vertical.gutters-4 >.span-8{padding:2px 0}.flex.vertical.gutters-4 >.span-10{padding:2px 0}.flex.vertical.gutters-4 >.span-12{padding:2px 0}.flex.vertical .offset-5{margin-top:42%}.flex.vertical >.gutter-5{padding-top:2.5px;padding-bottom:2.5px}.flex.vertical.gutters-5 >.span-1{padding:2.5px 0}.flex.vertical.gutters-5 >.span-2{padding:2.5px 0}.flex.vertical.gutters-5 >.span-3{padding:2.5px 0}.flex.vertical.gutters-5 >.span-4{padding:2.5px 0}.flex.vertical.gutters-5 >.span-5{padding:2.5px 0}.flex.vertical.gutters-5 >.span-6{padding:2.5px 0}.flex.vertical.gutters-5 >.span-8{padding:2.5px 0}.flex.vertical.gutters-5 >.span-10{padding:2.5px 0}.flex.vertical.gutters-5 >.span-12{padding:2.5px 0}.flex.vertical .offset-6{margin-top:50%}.flex.vertical >.gutter-6{padding-top:3px;padding-bottom:3px}.flex.vertical.gutters-6 >.span-1{padding:3px 0}.flex.vertical.gutters-6 >.span-2{padding:3px 0}.flex.vertical.gutters-6 >.span-3{padding:3px 0}.flex.vertical.gutters-6 >.span-4{padding:3px 0}.flex.vertical.gutters-6 >.span-5{padding:3px 0}.flex.vertical.gutters-6 >.span-6{padding:3px 0}.flex.vertical.gutters-6 >.span-8{padding:3px 0}.flex.vertical.gutters-6 >.span-10{padding:3px 0}.flex.vertical.gutters-6 >.span-12{padding:3px 0}.flex.vertical .offset-8{margin-top:67%}.flex.vertical >.gutter-8{padding-top:4px;padding-bottom:4px}.flex.vertical.gutters-8 >.span-1{padding:4px 0}.flex.vertical.gutters-8 >.span-2{padding:4px 0}.flex.vertical.gutters-8 >.span-3{padding:4px 0}.flex.vertical.gutters-8 >.span-4{padding:4px 0}.flex.vertical.gutters-8 >.span-5{padding:4px 0}.flex.vertical.gutters-8 >.span-6{padding:4px 0}.flex.vertical.gutters-8 >.span-8{padding:4px 0}.flex.vertical.gutters-8 >.span-10{padding:4px 0}.flex.vertical.gutters-8 >.span-12{padding:4px 0}.flex.vertical .offset-10{margin-top:83%}.flex.vertical >.gutter-10{padding-top:5px;padding-bottom:5px}.flex.vertical.gutters-10 >.span-1{padding:5px 0}.flex.vertical.gutters-10 >.span-2{padding:5px 0}.flex.vertical.gutters-10 >.span-3{padding:5px 0}.flex.vertical.gutters-10 >.span-4{padding:5px 0}.flex.vertical.gutters-10 >.span-5{padding:5px 0}.flex.vertical.gutters-10 >.span-6{padding:5px 0}.flex.vertical.gutters-10 >.span-8{padding:5px 0}.flex.vertical.gutters-10 >.span-10{padding:5px 0}.flex.vertical.gutters-10 >.span-12{padding:5px 0}.flex.vertical .offset-12{margin-top:100%}.flex.vertical >.gutter-12{padding-top:6px;padding-bottom:6px}.flex.vertical.gutters-12 >.span-1{padding:6px 0}.flex.vertical.gutters-12 >.span-2{padding:6px 0}.flex.vertical.gutters-12 >.span-3{padding:6px 0}.flex.vertical.gutters-12 >.span-4{padding:6px 0}.flex.vertical.gutters-12 >.span-5{padding:6px 0}.flex.vertical.gutters-12 >.span-6{padding:6px 0}.flex.vertical.gutters-12 >.span-8{padding:6px 0}.flex.vertical.gutters-12 >.span-10{padding:6px 0}.flex.vertical.gutters-12 >.span-12{padding:6px 0}.flex.vertical >.span-1{height:8%;width:auto}.flex.vertical >.span-2{height:17%;width:auto}.flex.vertical >.span-3{height:25%;width:auto}.flex.vertical >.span-4{height:33%;width:auto}.flex.vertical >.span-5{height:42%;width:auto}.flex.vertical >.span-6{height:50%;width:auto}.flex.vertical >.span-8{height:67%;width:auto}.flex.vertical >.span-10{height:83%;width:auto}.flex.vertical >.span-12{height:100%;width:auto}.flex >.span-12{width:100%;height:auto}.flex >.span-1{width:8%;height:auto}.flex >.order-1{order:1}.flex >.span-12{width:100%;height:auto}.flex >.span-2{width:17%;height:auto}.flex >.order-2{order:2}.flex >.span-12{width:100%;height:auto}.flex >.span-3{width:25%;height:auto}.flex >.order-3{order:3}.flex >.span-12{width:100%;height:auto}.flex >.span-4{width:33%;height:auto}.flex >.order-4{order:4}.flex >.span-12{width:100%;height:auto}.flex >.span-5{width:42%;height:auto}.flex >.order-5{order:5}.flex >.span-12{width:100%;height:auto}.flex >.span-6{width:50%;height:auto}.flex >.order-6{order:6}.flex >.span-12{width:100%;height:auto}.flex >.span-8{width:67%;height:auto}.flex >.order-8{order:8}.flex >.span-12{width:100%;height:auto}.flex >.span-10{width:83%;height:auto}.flex >.order-10{order:10}.flex >.span-12{width:100%;height:auto}.flex >.span-12{width:100%;height:auto}.flex >.order-12{order:12}.flex .fill{flex-grow:1;overflow:auto}