<!DOCTYPE html>
<html>
<head>
<meta content="ja" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width,initial-scale=1 , user-scalable=yes">
<title>flexbox demo</title>
<link rel="stylesheet" type="text/css" href= "demo_0609.css" media="screen">
</head>
<body>
<div id="container">
<div id="header">
<h1 id="title">flexbox 使用例</h1><h2>簡単にリキッド・レイアウト</h2>
</div>
<div class="rtunbtn"><a href= "06_09.html" target= "_top">Demo を終了して戻る</a></div>
<div id="box_A">display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: stretch; align-items: flex-start;
<div id="a_01" class="boxA">A_01<br>order: 0;<br>flex: 0 1 auto;<br>align-self: auto;</div>
<div id="a_02" class="boxA">A_02<br>order: 1;</div>
<div id="a_03" class="boxA">A_03<br>order: 2;</div>
<div id="a_04" class="boxA">A_04<br>order: 3;</div>
<div id="a_05" class="boxA">A_05<br>order: 4;</div>
<div id="a_06" class="boxA">A_06<br>order: 5;</div>
</div>
<div id="box_B">display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; align-items: center;
<div id="b_01" class="boxB">B_01<br>order: 0;</div>
<div id="b_02" class="boxB">B_02<br>order: 1;</div>
<div id="b_03" class="boxB">B_03<br>order: 2;</div>
<div id="b_04" class="boxB">B_04<br>order: 3;</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>