リストで列ごとに高さ合わせた2カラム作る時のメモ

flexbox.txt

https://jsfiddle.net/62mtbcc4/

index.html

<ul>
    <li>リストタグで</li>
    <li>行数が違っても<br>背景色の高さを揃えたい</li>
    <li>中身はセンタリングする</li>
    <li>最後の一つは</li>
    <li>中央寄せする</li>
</ul>

style.css

ul {
  display: flex;
  display: -ms-flexbox;
  /* 改行できるようにする */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* 最後に余ったやつを中央寄せする */
  justify-content: center;
  -ms-flex-pack: center;
  
  width: 100%;
}
li {
  flex-basis: 48%;
  -ms-flex: 0 0 48%;
  /*
  縦のmarginは%で指定できない
  http://stackoverflow.com/questions/26980916/firefox-ignores-vertical-margins-on-flex-items-children-of-a-flexbox-unless-ex
  */
  margin: 5px 1%;
    
  /* 中身の縦横センタリングのために子要素もflexにする */
  display: flex;
  display: -ms-flexbox;
  /* 中身の垂直センタリング */
  align-items: center;
  -ms-flex-align: center;
  /* 中身の水平センタリング */
  justify-content: center;
  -ms-flex-pack: center;
  
  padding: 10px 0;
  border-radius: 10px;
  background: #3366cc;
  color: #fff;
}