CSS
【CSS】フレキシボックスグリッドシステム。Flexy
August 17, 2016

Flexyはフレキシボックスグリッドシステムです。
<div class="row"> <div class="col-xs-12 col-md-6 col-lg-3">This is responsive.</div> </div>
<div class="row"> <div class="col-xs-12 col-md-8 col-md-offset-4">Offsets can be responsive.</div> </div>
<div class="row"> <div class="col-auto">Now sure how many columns you'll need.</div> <div class="col-auto">Add another and they'll be evenly distributed.</div> </div>
Around
<div class="row around-xs"> <div class="col-xs-4">Put spaces around each</div> <div class="col-xs-4">column</div> <div class="col-xs-4">evenly and responsively.</div> </div>
Between
<div class="row between-xs"> <div class="col-xs-4">Put spaces between each</div> <div class="col-xs-4">column</div> <div class="col-xs-4">evenly, and responsively.</div> </div>
<div class="row"> <div class="col-xs-12 col-sm-4"> <div class="row"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> </div> </div> <div class="col-xs-12 col-sm-8"> <div class="row"> <div class="col-xs-8"> <div class="row"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> </div> </div> </div> <div class="col-xs-4"></div> </div> </div> </div>
Top
<div class="row top-xs"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> </div>
Middle
<div class="row middle-xs"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> </div>
Bottom
<div class="row bottom-xs"> <div class="col-xs-6"></div> <div class="col-xs-6"></div> </div>
Start
<div class="row start-xs"> <div class="col-xs-4"></div> </div>
Center
<div class="row center-xs"> <div class="col-xs-4"></div> </div>
End
<div class="row end-xs"> <div class="col-xs-4"></div> </div>
First
<div class="row"> <div class="col-xs-2">1</div> <div class="col-xs-2">2</div> <div class="col-xs-2">3</div> <div class="col-xs-2">4</div> <div class="col-xs-2 first-xs">5</div> <div class="col-xs-2">6</div> </div>
Last
<div class="row"> <div class="col-xs-2">1</div> <div class="col-xs-2 last-xs">2</div> <div class="col-xs-2">3</div> <div class="col-xs-2">4</div> <div class="col-xs-2">5</div> <div class="col-xs-2">6</div> </div>
Reverse order
<div class="row reverse"> <div class="col-xs-2">1</div> <div class="col-xs-2">2</div> <div class="col-xs-2">3</div> <div class="col-xs-2">4</div> <div class="col-xs-2">5</div> <div class="col-xs-2">6</div> </div>