新しい技術とか古い技術とか関係なく今のhtmlを考える。

よりフレキシブルなdisplay:flexbox;

親要素に使用できるプロパティ(display:flex;と同じ場所に設定)
flex-flow flex-direction と flex-wrap をまとめて書きたいときに使用する。
flex-direction 各エレメントの配置方法、順番の指定。
row 横並び/順番通り
row-reverse 横並び/順番を逆に
column 縦並び/順番通り
column-reverse 縦並び/順番を逆に
flex-wrap 端まで来たときに折り返すか否か、また折り返し方法の指定
nowrap 端で折り返さない
wrap 端で折り返す
wrap-reverse 逆さまに折り返す
justify-content 要素をどこにどうやって揃えるかを指定。
flex-start 左（または上）側を起点として配置
flex-end 右（または下）側を起点として配置
center 中央揃え
space-between 均等幅に配置。両端は詰められる。
space-around 均等幅に配置。両端にも分け隔てなく感覚をおく。
align-content 複数の要素を整列させる。
flex-start 左（または上）側を起点として配置
flex-end 右（または下）側を起点として配置
center 中央揃え
space-between 均等幅に配置。両端は詰められる。
space-around 均等幅に配置。両端にも分け隔てなく感覚をおく。
align-items 複数の要素を整列させる。
flex-start 左（または上）側を起点として配置
flex-end 右（または下）側を起点として配置
center 中央揃え
baseline ベースラインで揃える
stretch 上下いっぱいにストレッチする。
子要素に使用できるプロパティ(display:flex;の子要素に設定)
order 数字 特定の子要素の並び順を設定
flex-grow 数字 特定の子要素を引き延ばす
flex-shrink 数字 特定の子要素を縮める
flex-basis auto 初期値
数字(width) 幅を指定
flex flex-grow/flex-shrink/flex-basisをまとめて書きたい時
none 指定なし
auto 初期値
flex-grow flex-shrink flex-basis それぞれの値を指定
align-self auto 初期値
flex-start 左（または上）側を起点として配置
flex-end 右（または下）側を起点として配置
center 中央揃え
baseline ベースラインで揃える
strech 上下いっぱいにストレッチする。

わかりやすいデモがあったので、ここを参考にメモしていきます。
CSS Flexbox Please!

基本、以下のソースを基準に、スタイルで見え方を操作しようと思います。 

----------------------------------------------
HTML
----------------------------------------------

<ul>
  <li id="colA">A</li>
  <li id="colB">B</li>
  <li id="colC">C</li>
  <li id="colD">D</li>
</ul>

flex-directionとflex-wrapを使ってみる

  • A
  • B
  • C
  • D
<ul id="fb-row-nw"> <!-- 以下同じようにulにIDを付与 -->
  <li class="colA">A</li>
  <li class="colB">B</li>
  <li class="colC">C</li>
  <li class="colD">D</li>
</ul>

#fb-row-nw{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row;
  frex-wrap:nowrap;
}
  • A
  • B
  • C
  • D
#fb-row-re-nw{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row-reverse;
  frex-wrap:nowrap;
}
  • A
  • B
  • C
  • D
#fb-col-nw{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:column;
  frex-wrap:nowrap;
}
  • A
  • B
  • C
  • D
#fb-col-re-nw{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:column-reverse;
  frex-wrap:nowrap;
}
  • A
  • B
  • C
  • D
#fb-row-w{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row;
  frex-wrap:nowrap;
}
  • A
  • B
  • C
  • D
#fb-row-re-w{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row-reverse;
  frex-wrap:nowrap;
}
  • A
  • B
  • C
  • D
#fb-col-w{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:column;
  frex-wrap:nowrap;
}
  • A
  • B
  • C
  • D
#fb-col-re-w{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:column-reverse;
  frex-wrap:nowrap;
}
  • A
  • B
  • C
  • D
#fb-row-wr{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row;
  frex-wrap:wrap-reverse;
}
  • A
  • B
  • C
  • D
#fb-row-re-wr {
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row-reverse;
  frex-wrap:wrap-reverse;
}
  • A
  • B
  • C
  • D
#fb-col-wr {
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:column;
  frex-wrap:wrap-reverse;
}
  • A
  • B
  • C
  • D
#fb-col-re-wr {
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:column-reverse;
  frex-wrap:wrap-reverse;
}

justify-contentを使ってみる

  • A
  • B
  • C
  • D
#fb-just-fs{
  background:#e4e4e4;
  height:150px;
  display: flex;
  justify-content:flex-start;
}
  • A
  • B
  • C
  • D
#fb-just-fe{
  background:#e4e4e4;
  height:150px;
  display: flex;
  justify-content:flex-end;
}
  • A
  • B
  • C
  • D
#fb-just-ct{
  background:#e4e4e4;
  height:150px;
  display: flex;
  justify-content:center;
}
  • A
  • B
  • C
  • D
#fb-just-sb{
  background:#e4e4e4;
  height:150px;
  display: flex;
  justify-content:space-between;
}
  • A
  • B
  • C
  • D
#fb-just-sa{
  background:#e4e4e4;
  height:150px;
  display: flex;
  justify-content:space-around;
}

align-content を使ってみる (flex-wrap:nowrap;は無効)

  • A
  • B
  • C
  • D
#fb-al-con-fs{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:flex-start;
}
  • A
  • B
  • C
  • D
#fb-al-con-fe{
  background:#e4e4e4;
  width:150px;
  height:150px;
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:flex-end;
}
  • A
  • B
  • C
  • D
#fb-al-con-ct{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:center;
}
  • A
  • B
  • C
  • D
#fb-al-con-sb{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:space-between;
}
  • A
  • B
  • C
  • D
#fb-al-con-sa{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:space-around;
}
  • A
  • B
  • C
  • D
#fb-al-con-st{
  background:#e4e4e4;
  height:150px;
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:stretch;
}

align-items を使ってみる

  • A
  • B
  • C
  • D
#fb-al-itm-fs{
  background:#e4e4e4;
  height:150px;
  display: flex;
  align-items:flex-start;
}
  • A
  • B
  • C
  • D
#fb-al-itm-fe{
  background:#e4e4e4;
  height:150px;
  display: flex;
  align-items:flex-end;
}
  • A
  • B
  • C
  • D
#fb-al-itm-ct{
  background:#e4e4e4;
  height:150px;
  display: flex;
  align-items:center;
}
  • A
  • B
  • C
  • D
#fb-al-itm-bl{
  background:#e4e4e4;
  height:150px;
  display: flex;
  align-items:baseline;
}
  • A
  • B
  • C
  • D
#fb-al-itm-st{
  background:#e4e4e4;
  height:150px;
  display: flex;
  align-items:stretch;
}

order 子要素の並び順を変更

HTML上ではABCDの順で書かれていますが、orderで順番を変更しています。

  • A
  • B
  • C
  • D
----------------------------------------------
HTML
----------------------------------------------
<ul id="fb-order">
  <li class="colA">A</li>
  <li class="colB">B</li>
  <li class="colC">C</li>
  <li class="colD">D</li>
</ul>

----------------------------------------------
CSS
----------------------------------------------
#fb-order{
	display:flex;
}
#fb-order .colA{order:3;}
#fb-order .colB{order:2;}
#fb-order .colC{order:1;}
#fb-order .colD{order:4;}

flex-grow　特定の子要素を引き延ばす

0.1〜1の間の数値を指定します

  • A
  • B
  • C
  • D
----------------------------------------------
HTML
----------------------------------------------
<ul id="fb-flex-grow">
  <li class="colA">A</li>
  <li class="colB">B</li>
  <li class="colC">C</li>
  <li class="colD">D</li>
</ul>
----------------------------------------------
CSS
----------------------------------------------
#fb-flex-grow{
	display:flex;
}
#fb-flex-grow .colB{flex-grow:.5;}

flex-shrink　特定の子要素を縮小する

整数値を指定します

  • A
  • B
  • C
  • D
----------------------------------------------
HTML
----------------------------------------------
<ul id="fb-flex-shrink">
  <li class="colA">A</li>
  <li class="colB">B</li>
  <li class="colC">C</li>
  <li class="colD">D</li>
</ul>
----------------------------------------------
CSS
----------------------------------------------

#fb-flex-shrink{
	display:flex;
}
#fb-flex-shrink li{
	width:30%;
}
#fb-flex-shrink li.colB{flex-shrink:5;}

flex-basis　特定の子要素の幅を指定する

  • A
  • B
  • C
  • D
----------------------------------------------
HTML
----------------------------------------------
<ul id="fb-flex-basis">
  <li class="colA">A</li>
  <li class="colB">B</li>
  <li class="colC">C</li>
  <li class="colD">D</li>
</ul>
----------------------------------------------
CSS
----------------------------------------------
#fb-flex-basis{
	display:flex;
}
#fb-flex-basis .colA{flex-basis:50px;}

flex　値をひとつにまとめる

プロパティを省略したいときに使用します。flex-grow/flex-shrink/flex-basisをまとめて書きたい時ということだけれど、flex-growとflex-shrinkをまとめて書きたい時ってどんな時だろ？

  • A
  • B
  • C
  • D
----------------------------------------------
HTML
----------------------------------------------
<ul id="fb-flex">
  <li class="colA">A</li>
  <li class="colB">B</li>
  <li class="colC">C</li>
  <li class="colD">D</li>
</ul>
----------------------------------------------
CSS
----------------------------------------------

#fb-flex{
	display:flex;
}
#fb-flex .colA{ flex: .3 0 30%;}

align-self　特定の子要素の配置を指定

  • A
  • B
  • C
  • D
----------------------------------------------
HTML
----------------------------------------------
<ul id="fb-align-self">
  <li class="colA">A</li>
  <li class="colB">B</li>
  <li class="colC">C</li>
  <li class="colD">D</li>
</ul>
----------------------------------------------
CSS
----------------------------------------------
#fb-align-self{
	height:60px;
	display:flex;
}
#fb-align-self .colA{ align-self:center;}
(c) 2011-2015 naoko okihara