Foundation6 Flex Gridの見本

<div class="row">
     <div class="columns small-2">
          ここは2/12
     </div>
     <div class="columns">
          残った10/12を3等分
     </div>
     <div class="columns">
          残った10/12を3等分
     </div>
     <div class="columns">
          残った10/12を3等分
     </div>
</div>

カラムを最小幅にする

あ

一文字分の幅を引いた残り

<div class="row">
     <div class="shrink columns">
     あ
     </div>
     <div class="columns">
     一文字分の幅を引いた残り
     </div>
</div>
<div class="row">
     <div class="shrink columns">
     	<img src="https://placehold.jp/50x50.png" alt="" />
     </div>
     <div class="columns">
	画像でも同様
     </div>
</div>

カラムを均等幅にする

ウインドウサイズが大きいと1/5、小さいと幅いっぱい

<div class="row">
     <div class="columns medium-expand small-12">
          ウインドウサイズが大きいと1/5、小さいと幅いっぱい
     </div>
     <div class="columns medium-expand small-12">
          ウインドウサイズが大きいと1/5、小さいと幅いっぱい
     </div>
     <div class="columns medium-expand small-12">
          ウインドウサイズが大きいと1/5、小さいと幅いっぱい
     </div>
     <div class="columns medium-expand small-12">
          ウインドウサイズが大きいと1/5、小さいと幅いっぱい
     </div>
     <div class="columns medium-expand small-12">
          ウインドウサイズが大きいと1/5、小さいと幅いっぱい
     </div>
</div>

横並び・縦並びを制御する

カラム幅を指定しないと3等分、ウインドウ幅が狭くても変わらない

カラム幅を指定しないと3等分、ウインドウ幅が狭いと縦並び

カラムが12以上でもいい

<div class="row">
	<div class="columns">カラム幅を指定しないと3等分、ウインドウ幅が狭くても変わらない</div>
	<div class="columns">カラム幅を指定しないと3等分、ウインドウ幅が狭くても変わらない</div>
	<div class="columns">カラム幅を指定しないと3等分、ウインドウ幅が狭くても変わらない</div>
</div>
<div class="row medium-unstack">
	<div class="columns">ウインドウ幅が狭くても3等分を保つ</div>
	<div class="columns">ウインドウ幅が狭くても3等分を保つ</div>
	<div class="columns">ウインドウ幅が狭くても3等分を保つ</div>
</div>

<div class="row medium-unstack">
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
	<div class="columns">カラムが12以上でもいい</div>
</div>

水平方向の行揃え

従来なら

12に足りないと

最後に「end」が必要

Flex Gridなら

余りが出ても大丈夫！

.rowに「align-center」を付加することで

中央揃え

12で割り切れなくてもいいです。
（ここの左右の余白は1.5カラム）

均等割もできる

つまりこれは

justify-content: space-between;

左右の余白を均等に取る

justify-content: space-around;も

使えます。

<div class="row">
	<div class="columns small-2">
		従来なら
	</div>
	<div class="columns small-2">
		12に足りないと
	</div>
	<div class="columns small-2 end">
		最後に「end」が必要
	</div>
</div>

<div class="row">
	<div class="columns small-2">
		Flex Gridなら
	</div>
	<div class="columns small-2">
		Flex Gridなら
	</div>
	<div class="columns small-2">
		余りが出ても大丈夫！
	</div>
</div>

<div class="row align-center">
	<div class="columns small-3">
		.rowに「align-center」を付加することで
	</div>
	<div class="columns small-3">
		中央揃え
	</div>
	<div class="columns small-3">
		12で割り切れなくてもいいです。<br />
		（ここの左右の余白は1.5カラム）
	</div>
</div>

<div class="row align-justify">
	<div class="columns small-3">
		均等割もできる
	</div>
	<div class="columns small-3">
		つまりこれは
	</div>
	<div class="columns small-3">
		justify-content: space-between;
	</div>
</div>

<div class="row align-spaced">
	<div class="columns small-3">
		左右の余白を均等に取る
	</div>
	<div class="columns small-3">
		justify-content: space-around;も
	</div>
	<div class="columns small-3">
		使えます。
	</div>
</div>

垂直方向の行揃え

縦揃え

こっちのほうが縦長
こっちのほうが縦長
こっちのほうが縦長
こっちのほうが縦長
こっちのほうが縦長
こっちのほうが縦長
こっちのほうが縦長
こっちのほうが縦長
こっちのほうが縦長
こっちのほうが縦長

高さを揃える（わかりにくいけどcolumnsに指定した背景が追随している）

.columnsにalign-topを指定

ここは指定なし。
ここは指定なし。
ここは指定なし。
ここは指定なし。
ここは指定なし。
ここは指定なし。
ここは指定なし。
ここは指定なし。

.columnsにalign-bottomを指定

<div class="row align-middle">
	<div class="columns small-2">
		縦揃え
	</div>
	<div class="columns small-10">
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長
	</div>
</div>

<div class="row align-stretch">
	<div class="columns">
		高さを揃える（わかりにくいけどcolumnsに指定した背景が追随している）
	</div>
	<div class="columns">
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長<br />
		こっちのほうが縦長
	</div>
</div>

<div class="row">
	<div class="columns align-top">
		.columnsにalign-topを指定
	</div>
	<div class="columns">
		ここは指定なし。<br />
		ここは指定なし。<br />
		ここは指定なし。<br />
		ここは指定なし。<br />
		ここは指定なし。<br />
		ここは指定なし。<br />
		ここは指定なし。<br />
		ここは指定なし。
	</div>
	<div class="columns align-bottom">
		.columnsにalign-bottomを指定
	</div>
</div>

カラムの余白を制御する

余白がある

余白がない

未指定では余白あり

<div class="row small-uncollapse">
	<div class="columns">
		余白がある
	</div>
	<div class="columns">
		余白がある
	</div>
</div>
<div class="row small-collapse">
	<div class="columns">
		余白がない
	</div>
	<div class="columns">
		余白がない
	</div>
</div>
<div class="row">
	<div class="columns">
		未指定では余白あり
	</div>
	<div class="columns">
		未指定では余白あり
	</div>
</div>

カラム間のマージンを取る

左側に1カラム分マージンを取る

カラム幅を指定しない場合、1/12のマージンを取り残りが割り当てられる

<div class="row">
	<div class="columns small-2 small-offset-1">
		左側に1カラム分マージンを取る
	</div>
	<div class="columns small-2 small-offset-1">
		左側に1カラム分マージンを取る
	</div>
	<div class="columns small-offset-1">
		カラム幅を指定しない場合、1/12のマージンを取り残りが割り当てられる
	</div>
</div>

並び順を制御する

HTML上は先に書かれているけど順番は2

HTML上は後に書かれているけど順番は1

<div class="row">
	<div class="columns small-order-2">
	HTML上は先に書かれているけど順番は2
	</div>
	<div class="columns small-order-1">
	HTML上は後に書かれているけど順番は1
	</div>
</div>