読者です 読者をやめる 読者になる 読者になる

flexboxを使う 1

フレキシブルボックスレイアウト(flexible Box Layout Module)

flexboxはWebページを柔軟にレイアウトするために作られたもので、 親要素(Flexboxコンテナ)の中に子要素(Flexboxアイテム)を並べていくという考え方でレイアウトします。

flexboxの特徴

  • アイテム同士の高さを自動で揃える
  • アイテム同士の上下方向位置揃えをする
  • アイテム同士を均等配置する
  • アイテム同士の水平・垂直方向への整列ができる
  • CSSだけでアイテム表示の順番を指定できる
  • 仕様が複雑で学習難易度が高い

 

flexboxを試す

ulを使って子要素のliを並べるには、通常はulにoverflow:hidden、liにfloatを使っていますが、 flexboxを使って同様のことを行います。

 

左から横に並べる(flex-direction: row;

f:id:develog:20161201084908p:plain

 

右から横に並べる(flex-direction: row-reverse;)

f:id:develog:20161201084913p:plain

 

上から下に並べる(flex-direction: column;

         f:id:develog:20161201084916p:plain

 

下から上に並べる(flex-direction: column-reverse;

         f:id:develog:20161201084920p:plain

 

ソースファイル

<!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>