flex-rwd
Version:
Responsive web design by css flex
6 lines • 4.39 kB
CSS
/*!
* Flex Responsive Layout
* @author: rehiy<wang@rehiy.com>
* @website: http://www.rehiy.com
* @license: MIT License
*/.flex{display:flex;overflow:hidden}.flex>.flex-12{width:100%}.flex>.flex-11{width:91.6666666667%}.flex>.flex-10{width:83.3333333333%}.flex>.flex-9{width:75%}.flex>.flex-8{width:66.6666666667%}.flex>.flex-7{width:58.3333333333%}.flex>.flex-6{width:50%}.flex>.flex-5{width:41.6666666667%}.flex>.flex-4{width:33.3333333333%}.flex>.flex-3{width:25%}.flex>.flex-2{width:16.6666666667%}.flex>.flex-1{width:8.3333333333%}.flex.space-4{justify-content:space-between}.flex.space-4>.flex-12{width:calc(100% - 0px)}.flex.space-4>.flex-11{width:calc(91.6666666667% - 2.6666666667px)}.flex.space-4>.flex-10{width:calc(83.3333333333% - 5.3333333333px)}.flex.space-4>.flex-9{width:calc(75% - 8px)}.flex.space-4>.flex-8{width:calc(66.6666666667% - 10.6666666667px)}.flex.space-4>.flex-7{width:calc(58.3333333333% - 13.3333333333px)}.flex.space-4>.flex-6{width:calc(50% - 16px)}.flex.space-4>.flex-5{width:calc(41.6666666667% - 18.6666666667px)}.flex.space-4>.flex-4{width:calc(33.3333333333% - 21.3333333333px)}.flex.space-4>.flex-3{width:calc(25% - 24px)}.flex.space-4>.flex-2{width:calc(16.6666666667% - 26.6666666667px)}.flex.space-4>.flex-1{width:calc(8.3333333333% - 29.3333333333px)}.flex.flex-wrap.space-4.space-fix{margin-bottom:-32px}.flex.flex-wrap.space-4>[class*=flex]{margin-bottom:32px}.flex.space-3{justify-content:space-between}.flex.space-3>.flex-12{width:calc(100% - 0px)}.flex.space-3>.flex-11{width:calc(91.6666666667% - 2px)}.flex.space-3>.flex-10{width:calc(83.3333333333% - 4px)}.flex.space-3>.flex-9{width:calc(75% - 6px)}.flex.space-3>.flex-8{width:calc(66.6666666667% - 8px)}.flex.space-3>.flex-7{width:calc(58.3333333333% - 10px)}.flex.space-3>.flex-6{width:calc(50% - 12px)}.flex.space-3>.flex-5{width:calc(41.6666666667% - 14px)}.flex.space-3>.flex-4{width:calc(33.3333333333% - 16px)}.flex.space-3>.flex-3{width:calc(25% - 18px)}.flex.space-3>.flex-2{width:calc(16.6666666667% - 20px)}.flex.space-3>.flex-1{width:calc(8.3333333333% - 22px)}.flex.flex-wrap.space-3.space-fix{margin-bottom:-24px}.flex.flex-wrap.space-3>[class*=flex]{margin-bottom:24px}.flex.space-2{justify-content:space-between}.flex.space-2>.flex-12{width:calc(100% - 0px)}.flex.space-2>.flex-11{width:calc(91.6666666667% - 1.3333333333px)}.flex.space-2>.flex-10{width:calc(83.3333333333% - 2.6666666667px)}.flex.space-2>.flex-9{width:calc(75% - 4px)}.flex.space-2>.flex-8{width:calc(66.6666666667% - 5.3333333333px)}.flex.space-2>.flex-7{width:calc(58.3333333333% - 6.6666666667px)}.flex.space-2>.flex-6{width:calc(50% - 8px)}.flex.space-2>.flex-5{width:calc(41.6666666667% - 9.3333333333px)}.flex.space-2>.flex-4{width:calc(33.3333333333% - 10.6666666667px)}.flex.space-2>.flex-3{width:calc(25% - 12px)}.flex.space-2>.flex-2{width:calc(16.6666666667% - 13.3333333333px)}.flex.space-2>.flex-1{width:calc(8.3333333333% - 14.6666666667px)}.flex.flex-wrap.space-2.space-fix{margin-bottom:-16px}.flex.flex-wrap.space-2>[class*=flex]{margin-bottom:16px}.flex.space-1{justify-content:space-between}.flex.space-1>.flex-12{width:calc(100% - 0px)}.flex.space-1>.flex-11{width:calc(91.6666666667% - 0.6666666667px)}.flex.space-1>.flex-10{width:calc(83.3333333333% - 1.3333333333px)}.flex.space-1>.flex-9{width:calc(75% - 2px)}.flex.space-1>.flex-8{width:calc(66.6666666667% - 2.6666666667px)}.flex.space-1>.flex-7{width:calc(58.3333333333% - 3.3333333333px)}.flex.space-1>.flex-6{width:calc(50% - 4px)}.flex.space-1>.flex-5{width:calc(41.6666666667% - 4.6666666667px)}.flex.space-1>.flex-4{width:calc(33.3333333333% - 5.3333333333px)}.flex.space-1>.flex-3{width:calc(25% - 6px)}.flex.space-1>.flex-2{width:calc(16.6666666667% - 6.6666666667px)}.flex.space-1>.flex-1{width:calc(8.3333333333% - 7.3333333333px)}.flex.flex-wrap.space-1.space-fix{margin-bottom:-8px}.flex.flex-wrap.space-1>[class*=flex]{margin-bottom:8px}.hidden{display:none }.flex-avg{flex:1}.flex-auto{flex:auto}.flex-wrap{flex-wrap:wrap}.flex-left{justify-content:flex-start}.flex-center{justify-content:center}.flex-right{justify-content:flex-end}.flex-around{justify-content:space-around}.flex-between{justify-content:space-between}.flex-evenly{justify-content:space-evenly}.flex-top{align-items:flex-start}.flex-middle{align-items:center}.flex-bottom{align-items:flex-end}.flex-baseline{align-items:baseline}