<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フレキシブルボックス</title>
<style type="text/css">
.booklist{
position: relative;
}
.title{
margin-left: 41px
}
section {
margin-bottom: 2%;
}
.btn{
width:100%;
bottom:5px;
}
.booklist {
display: flex;
/*justify-content: space-between;*/
justify-content: center;
margin-right:20px;
align-items: flex-end;
}
.yourbook{
margin-right:10px;
margin-top: 31px;
}
.yourbook img{
width:100%;
}
.title{
}
</style>
</head>
<body>
<div class="main">
<section>
<ul class="booklist">
<li>
<dl>
<dt class="title">鋼タイトルタイトルタイトル</dt>
<dd class="yourbook"><img src="http://img.bookstore.c.yimg.jp/im_sigg8FfPtahC3ALuXS_FKBpVvA---x200/ebook/5f/16/5f16709bdaf95b27df6b664c749aff920002_cover.jpg" alt=""></dd>
<dd class="btn"><a href="#" class="logo">ボタン</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="title">僕だけがタイトルタイトルタイトル<br><br><br></dt>
<!-- <dd class="yourbook"><img src="http://img.bookstore.c.yimg.jp/im_siggNVTf6asnJYAUy33cMRH71w---x200/ebook/4b/db/4bdb0e7d84302244321c69f51318e9db0000_cover.jpg" alt=""></dd> -->
<dd class="yourbook"><img src="bokumini.jpg" alt=""></dd>
<dd class="btn"><a href="#" class="logo">ボタン</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="title">タイトル<br><br></dt>
<dd class="yourbook"><img src="http://img.bookstore.c.yimg.jp/im_siggP4vMSeEEvBDVmAFYEFe1Iw---x200/ebook/2d/10/2d10eb7459ca2d68aa78f6ddd9eb02c60001_cover.jpg" alt=""></dd>
<dd class="btn"><a href="#" class="logo">ボタン</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="title">タイトルタイトルタイトル<br><br></dt>
<dd class="yourbook"><img src="http://img.bookstore.c.yimg.jp/im_siggbtrvCxOQwyAwivMg7NhaJQ---x200/ebook/40/d8/40d8d3e33f1c7a17353155e0a8bb37ea0001_cover.jpg" alt=""></dd>
<dd class="btn"><a href="#" class="logo">ボタン</a></dd>
</dl>
</li>
</ul>
</section>
<section>
<ul class="booklist">
<li>
<dl>
<dt>タイトルタイトルタイトル</dt>
<dd><img src="http://img.bookstore.c.yimg.jp/im_sigg8FfPtahC3ALuXS_FKBpVvA---x200/ebook/5f/16/5f16709bdaf95b27df6b664c749aff920002_cover.jpg" alt=""></dd>
<dd><img src="" alt=""></dd>
<dd class="btn"><a href="#" class="logo">ボタン</a></dd>
</dl>
</li>
<li>
<dl>
<dt>タイトルタイトルタイトル</dt>
<dd><img src="http://img.bookstore.c.yimg.jp/im_siggNVTf6asnJYAUy33cMRH71w---x200/ebook/4b/db/4bdb0e7d84302244321c69f51318e9db0000_cover.jpg" alt=""></dd>
<dd class="btn"><a href="#" class="logo">ボタン</a></dd>
</dl>
</li>
<li>
<dl>
<dt>タイトル</dt>
<dd><img src="http://img.bookstore.c.yimg.jp/im_siggP4vMSeEEvBDVmAFYEFe1Iw---x200/ebook/2d/10/2d10eb7459ca2d68aa78f6ddd9eb02c60001_cover.jpg" alt=""></dd>
<dd><a href="#" class="logo">ボタン</a></dd>
</dl>
</li>
<li>
<dl>
<dt>タイトルタイトルタイトル</dt>
<dd><img src="http://img.bookstore.c.yimg.jp/im_siggbtrvCxOQwyAwivMg7NhaJQ---x200/ebook/40/d8/40d8d3e33f1c7a17353155e0a8bb37ea0001_cover.jpg" alt=""></dd>
<dd class="btn"><a href="#" class="logo">ボタン</a></dd>
</dl>
</li>
</ul>
</section>
</div>
</body>
</html>
