Skip to content

Instantly share code, notes, and snippets.

@adamay000
Last active June 22, 2016 13:52
Show Gist options
  • Save adamay000/c9e164b6809411b4e362a0af4aa5aeb1 to your computer and use it in GitHub Desktop.
Save adamay000/c9e164b6809411b4e362a0af4aa5aeb1 to your computer and use it in GitHub Desktop.
リストで列ごとに高さ合わせた2カラム作る時のメモ
https://jsfiddle.net/62mtbcc4/
<ul>
<li>リストタグで</li>
<li>行数が違っても<br>背景色の高さを揃えたい</li>
<li>中身はセンタリングする</li>
<li>最後の一つは</li>
<li>中央寄せする</li>
</ul>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment