• このエントリーをはてなブックマークに追加

HTML

<div id="index">
<div class="item-list">
<h2>ランキング</h2>
<p>商品一覧で商品名の長さ等で縦揃えがばらばらになってしまうときに、flexを使って揃える。</p>
<ul>
<li>
    <a href="#">
        <span class="thumb"><img src="images/item-rank1.jpg" alt="1位"></span>
        <span class="name">商品名商品名商品名商品名商品</span>
    </a>
    <span class="price">\99,999</span>
</li>
<li>
    <a href="#">
        <span class="thumb"><img src="images/item-rank1.jpg" alt="2位"></span>
        <span class="name">商品名商品名商品名商品名商品名商品名商品名</span>
    </a>
    <span class="price">\99,999</span>
</li>
<li>
    <a href="#">
        <span class="thumb"><img src="images/item-rank1.jpg" alt="3位"></span>
        <span class="name">商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名</span>
    </a>
    <span class="price">\99,999</span>
</li>
<li>
    <a href="#">
        <span class="thumb"><img src="images/item-rank1.jpg" alt="4位"></span>
        <span class="name">商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名</span>
    </a>
    <span class="price">\99,999</span>
</li>
<li>
    <a href="#">
        <span class="thumb"><img src="images/item-rank1.jpg" alt="5位"></span>
        <span class="name">商品名商品名商品名商品名商品名商品名</span>
    </a>
    <span class="price">\99,999</span>
</li>
<li>
    <a href="#">
        <span class="thumb"><img src="images/item-rank1.jpg" alt="6位"></span>
        <span class="name">商品名</span>
    </a>
    <span class="price">\99,999</span>
</li>
<li>
    <a href="#">
        <span class="thumb"><img src="images/item-rank1.jpg" alt="7位"></span>
        <span class="name">商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名</span>
    </a>
    <span class="price">\99,999</span>
</li>
<li>
    <a href="#">
        <span class="thumb"><img src="images/item-rank1.jpg" alt="8位"></span>
        <span class="name">商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名</span>
    </a>
    <span class="price">\99,999</span>
</li>
<li>
    <a href="#">
        <span class="thumb"><img src="images/item-rank1.jpg" alt="9位"></span>
        <span class="name">商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名</span>
    </a>
    <span class="price">\99,999</span>
</li>
<li>
    <a href="#">
        <span class="thumb"><img src="images/item-rank1.jpg" alt="10位"></span>
        <span class="name">商品名商品名商品名商品名商品名商品名商品名商品名商品名商品名</span>
    </a>
    <span class="price">\99,999</span>
</li>
</ul>
</div>
</div>

CSS

/********** 商品リスト **********/
#index .item-list ul{
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    margin:0;
    padding:0;
}
#index .item-list ul li{
    flex-direction:column;
    justify-content:space-between;
    display:-webkit-flex;

    width:230px;
    margin:0 20px 18px 0;
}
#index .item-list ul li a{
    display:block;
}
#index .item-list ul li .thumb{
    margin:0 0 5px;
}
#index .item-list ul li .thumb img{
    max-width:100%;
    height:auto;
}
#index .item-list ul li a{
    display:block;
    margin:0 0 5px;
}
#index .item-list ul li .price{
    display:block;
    font-weight:bold;
    color:#f00
}