<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>フレックスボックス</title>
</head>
<style>
.container{
width:16rem;height:16rem;background:#FFF;border:0.3rem black solid;
}
.container div{
width:3rem;
}
.a{
background:#dcdcdc;
height:3rem;
}
.b{
background:#c0c0c0;
font-size:0.5rem;
}
.c{
background:#808080;
height:6rem;
font-size:2rem;
}
.d{
background:#696969;color:#C0C0C0;
}
.e{
background:#000000;color:#C0C0C0;
height:2rem;
}
</style>
<body>
<h1>フレックスボックス</h1>
<article>
<h2>基本問題</h2>
<figure>
<div class="container" style="">
<div class="a" style="">A</div>
<div class="b" style="">B</div>
<div class="c" style="">C</div>
<div class="d" style="">D</div>
<div class="e" style="">E</div>
</div>
</figure>
</article>
</body>
</html>