【CSS】シンプルなFlexboxグリッドSimple Flexbox Grid

Simple Flexbox GridはシンプルなFlexboxグリッド

Nosso

simple_flexbox_grid_1

<section class="row">
<div class="col-sm-6 col-md-3">
....
</div>
<div class="col-sm-6 col-md-3">
...
</div>
<div class="col-sm-6 col-md-3">
...
</div>
<div class="col-sm-6 col-md-3">
...
</div>
</section>
<section class="row">
<div class="col-sm-2">
...
</div>
<div class="col-sm-10">
...
</div>
</section>
<section class="row">
<div class="col-sm-8">
...
</div>
<div class="col-sm-4">
...
</div>
</section>

Offset

simple_flexbox_grid_2

<section class="row">
<div class="col-sm-offset-11 col-sm-1">
...
</div>
<div class="col-sm-offset-10 col-sm-2">
...
</div>
<div class="col-sm-offset-9 col-sm-3">
...
</div>
<div class="col-sm-offset-6 col-sm-6">
...
</div>
</section>
 
simple-flexbox-grid

【CSS】シンプルなFlexboxグリッドSimple Flexbox Grid

  • LATEST
  • RELATED
  • POPULAR