http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html
Flexboxとは、CSS3で追加されたレイアウトモジュール。
複数の子要素(flexアイテムと呼ばれる)を内包するflexコンテナ要素で構成される。
display: flex; または display: inline-flex; を持つ要素がflexコンテナ、その子要素が自動的にflexアイテムになる。
以下のようなcssで指定した通りの順番、位置に配置される。
htmlを変更しなくても大幅な配置変更が可能であり、レスポンシブデザインなどに利用できる。
「flex-direction」は、水平に配置されるか、垂直に配置されるかと、昇順配置か、降順配置かを指定する。
「flex-wrap」は、折り返しを指定する。
基本的にflexボックスは親要素に収まるように小さくなるが、flex-wrap: wrap; の場合、flexボックスは小さくならない。親要素から溢れる分のflexボックスは次の行に表示する。
flex-wrap: wrap-reverse; だと、「次の行」を本来と逆方向にできる。
「justify-content」は、flexボックスが表示される横位置を指定する。alignに近いイメージ。
「align-items」は、flexボックスが表示される縦位置を指定する。table-cell要素に対するvirtical-alignに近いイメージ。
flexボックスに指定するcss「align-self」。表示される縦位置を指定する。inline要素に対するvirtical-alignに近いイメージ。
flexボックスに指定するcss「order」。表示されるときに使われる順序を強制指定する。既定値だとコード上で書いてある順がそのまま表示される順。
flexボックスに指定するcss「flex-grow」。Flexコンテナの幅が余っている場合、1以上ならそれを埋めるように広がる。既定値は0(広がらない)。
flexボックスに指定するcss「flex-shrink」。Flexコンテナの幅が足りない場合、1以上なら縮まる。既定値は1。0を指定すると縮まらない(強制的に元サイズで表示)。
flexボックスに指定するcss「flex-basis」。Flexコンテナの子要素に対するwidthスタイルみたいなもの。ピクセルや％で幅を指定する。
flexボックスに指定するcss「flex」は、flex-grow、flex-shrink、flex-basisを一気に指定する。公式にこちらが推奨されている。デフォルト値: 0 1 auto。
こんな感じ。
<html>
<head>
<style>
div {
display : flex;
width : 250px;
border : solid 1px lightgray;
}
p {
width : 100px;
border : solid 1px black;
}
</style>
</head>
<body>
<h2>flex-direction</h2>
<div style="flex-direction: row" ><p>1</p><p>2</p><p>3</p></div>
<div style="flex-direction: row-reverse" ><p>1</p><p>2</p><p>3</p></div>
<div style="flex-direction: column" ><p>1</p><p>2</p><p>3</p></div>
<div style="flex-direction: column-reverse"><p>1</p><p>2</p><p>3</p></div>
<h2>flex-wrap</h2>
<div style="flex-wrap: nowrap" ><p>1</p><p>2</p><p>3</p></div>
<div style="flex-wrap: wrap" ><p>1</p><p>2</p><p>3</p></div>
<div style="flex-wrap: wrap-reverse" ><p>1</p><p>2</p><p>3</p></div>
<h2>justify-content</h2>
<div style="justify-content: flex-start" ><p>1</p><p>2</p></div>
<div style="justify-content: flex-end" ><p>1</p><p>2</p></div>
<div style="justify-content: center" ><p>1</p><p>2</p></div>
<div style="justify-content: space-between"><p>1</p><p>2</p></div>
<div style="justify-content: space-around" ><p>1</p><p>2</p></div>
