CSS

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

August 17, 2016

Flexyはフレキシボックスグリッドシステムです。

Responsive

<div class="row">
  <div class="col-xs-12 col-md-6 col-lg-3">This is responsive.</div>
</div>

Column offsets

<div class="row">
  <div class="col-xs-12 col-md-8 col-md-offset-4">Offsets can be responsive.</div>
</div>

Automatic columns

<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>

Column distribution

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>

Gridception

<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>

Vertical alignments

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>

Horizontal alignments

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>

Column (re)order

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>

Demo/Download