こちらからZipファイルをダウンロードして/css/dlex.cssのファイルを対象のページに設置してください。
<link rel="stylesheet" href="/PATH/css/dlex.css" />
npmでもインストールできます。
$ npm install dlex
classを当てるだけでFlexboxを簡単に使えます。
複数のclassを組み合わせることで様々なレイアウトが可能になります。
.flx-rowをつけるとその子要素は横並びになります。
<div class="flx-row">
<div >First</div>
<div>Second</div>
<div>Third</div>
</div>
.flx-rowに.flx-auto-mlまたは.flx-auto-mrをつけると要素の幅に合わせて左右に余白を取ります。
<div class="flx-row">
<div class="flx-auto-mr">First</div>
<div>Second</div>
<div>Third</div>
</div>
<div class="flx-row">
<div >First</div>
<div>Second</div>
<div class="flx-auto-ml">Third</div>
</div>
.flx-rowの子要素に.flx-colをつけると均等の幅で配置されます。
<div class="flx-row">
<div class="flx-col">First</div>
<div class="flx-col">Second</div>
<div class="flx-col">Third</div>
<div class="flx-col">fourth</div>
<div class="flx-col">fifth</div>
<div class="flx-col">sixth</div>
</div>
.flx-col-*をつけることで12分割の幅に指定できます。
<div class="flx-row">
<div class="flx-col-1">First</div>
<div class="flx-col-2">Second</div>
<div class="flx-col-3">Third</div>
</div>
.flx-col-offset-*をつけることで横幅に12分割の余白を指定できます。
<div class="flx-row">
<div class="flx-col-1">First</div>
<div class="flx-col-2 flx-col-offset-4">Second</div>
<div class="flx-col-3 flx-col-offset-1">Third</div>
</div>
.flx-aroundをつけることで左右の余白を均等に保ちます。
<div class="flx-row flx-around">
<div class="flx-col-1">First</div>
<div class="flx-col-2">Second</div>
<div class="flx-col-3">Third</div>
</div>
.flx-betweenをつけることで横幅いっぱいに広がり両端の余白以外の余白を均等に保ちます。
<div class="flx-row flx-between">
<div class="flx-col-1">First</div>
<div class="flx-col-2">Second</div>
<div class="flx-col-2">Third</div>
<div class="flx-col-3">fourth</div>
</div>
.flx-start.flx-center.flx-endつける事で幅寄せが可能です。
.flx-start
<div class="flx-row flx-start">
<div class="flx-col-1">First</div>
<div class="flx-col-2">Second</div>
<div class="flx-col-3">Third</div>
</div>
.flx-center
<div class="flx-row flx-center">
<div class="flx-col-1">First</div>
<div class="flx-col-2">Second</div>
<div class="flx-col-3">Third</div>
</div>
.flx-end
<div class="flx-row flx-end">
<div class="flx-col-1">First</div>
<div class="flx-col-2">Second</div>
<div class="flx-col-3">Third</div>
</div>
.flx-top.flx-middle.flx-bottomのclassをつける事で縦並びの位置の指定が可能になります。
.flx-top
<div class="flx-row flx-top">
<div class="flx-col">First</div>
<div class="flx-col">Second</div>
<div class="flx-col">Third</div>
</div>
.flx-middle
<div class="flx-row flx-middle">
<div class="flx-col">First</div>
<div class="flx-col">Second</div>
<div class="flx-col">Third</div>
</div>
.flx-bottom
<div class="flx-row flx-bottom">
<div class="flx-col">First</div>
<div class="flx-col">Second</div>
<div class="flx-col">Third</div>
</div>
.flx-*-sm.flx-*-md.flx-*-lgでブレイクポイント毎で切り分ける事ができます。
.flx-*-sm:min-width: 767px.flx-*-md:max-width: 959px.flx-*-lg:min-width: 960px
<div class="flx-row">
<div class="flx-col-sm-2 flx-col-md-4 flx-col-lg-12">First</div>
<div class="flx-col-1">Second</div>
<div class="flx-col-1">Third</div>
</div>