flexboxを使う 1
フレキシブルボックスレイアウト（flexible Box Layout Module）
flexboxはWebページを柔軟にレイアウトするために作られたもので、 親要素（Flexboxコンテナ）の中に子要素（Flexboxアイテム）を並べていくという考え方でレイアウトします。
flexboxの特徴
- アイテム同士の高さを自動で揃える
- アイテム同士の上下方向位置揃えをする
- アイテム同士を均等配置する
- アイテム同士の水平・垂直方向への整列ができる
- CSSだけでアイテム表示の順番を指定できる
- 仕様が複雑で学習難易度が高い
flexboxを試す
ulを使って子要素のliを並べるには、通常はulにoverflow:hidden、liにfloatを使っていますが、 flexboxを使って同様のことを行います。
左から横に並べる（flex-direction: row;）
右から横に並べる（flex-direction: row-reverse;）
上から下に並べる（flex-direction: column;）
下から上に並べる（flex-direction: column-reverse;）
ソースファイル
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>flexboxを使ったレイアウト</title>
<style>
html,body,ul,li {
margin: 0 ;
padding: 0;
}
ul {
list-style: none;
width: 80%;
margin: 10px auto;
/*---------------------------------------------*/
display: flex; /*liの親要素であるulに記述*/
flex-direction: row; /*左から右に並べる*/
/*flex-direction: row-reverse;*/ /*右から左に並べる*/
/*flex-direction: column;*/ /*上から下に並べる*/
/*flex-direction: column-reverse;*/ /*下から上に並べる*/
/*---------------------------------------------*/
}
li {
width: 20%;
height: 100px;
background: #F30;
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight:bold;
color: #FFF;
}
li:nth-child(even) {
background: #FC0;
}
</style>
</head>
<body>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
</body>
</html>
