<div class="CG2-articleHeader">
<div class="CG2-articleHeader__inner">
<div class="CG2-articleHeader__category">
<div class="CG2-articleHeader__categoryIcon">
<span class="CG2-icon-cat-elementary"></span>
</div>
<div class="CG2-articleHeader__categoryName">入門</div>
</div>
<div class="CG2-articleHeader__main">
<div class="CG2-articleHeader__mainInner">
<div class="CG2-articleHeader__series">
<a href="javascript:alert( 'シリーズ一覧へ' );">
そこが知りたい、 Flexible Box
</a>
</div>
<div class="CG2-articleHeader__title">第2回 仕様を知る 2</div>
<div class="CG2-articleHeader__abstract">
<p>フレックスアイテムにflex-growやflex-shrinkを設定すると、フレックスコンテナの範囲内で伸びたり、縮んだりします。このときひとつひとつのアイテムの長さがどのように決まるのか解説します。</p>
</div>
<div class="CG2-articleHeader__pubDate">2015年 5月14日発行</div>
<div class="CG2-articleHeader__authors">
<div class="CG2-articleHeader__author">
<a href="#">
<div class="CG2-articleHeader__authorImage">
<img src="http://img.pxgrid.net/48x48" alt="">
</div>
<div class="CG2-articleHeader__authorName">坂巻 翔大郎</div>
<div class="CG2-articleHeader__authorTitle">フロントエンド・エンジニア</div>
</a>
</div>
<div class="CG2-articleHeader__author">
<a href="#">
<div class="CG2-articleHeader__authorImage">
<img src="http://img.pxgrid.net/48x48" alt="">
</div>
<div class="CG2-articleHeader__authorName">坂巻 翔大郎</div>
</a>
</div>
</div>
</div>
</div>
<div class="CG2-articleHeader__pagenation">
<ul>
<li class="CG2-articleHeader__pagenationPrev"><a href="#">前回</a></li>
<li class="CG2-articleHeader__pagenationNext"><a href="#">次回</a></li>
</ul>
</div>
<div class="CG2-articleHeader__utils">
<ul>
<li><a href="#" class="CG2-transparentButton"><span class="CG2-icon-list"></span>このシリーズの記事一覧をみる</a></li>
<li><button class="CG2-transparentButton"><span class="CG2-icon-star"></span>このシリーズをお気に入りに登録</button></li>
<li><button class="CG2-transparentButton">未読にする</button></li>
</ul>
</div>
</div>
<div class="CG2-articleHeader__bg" style="background-image: url( './img/_01.jpg' )"></div>
</div>