CSS
【CSS】Flexboxを使用したグリッドフレームワークFlexington
December 8, 2016

FlexingtonはFlexboxを使用したグリッドフレームワーク。
<div class="row"> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">Flex</div> </div>
MIT