Flexboxで横並び
フレックスボックス (Flexible Box Layout Module)
CSSでレイアウトを組む時に簡単に使えます。
練習用素材ダウンロード／flex-b.zip（画像、html、css）
通常の並び
以下のように画像やテキストは上から下へと表示されます。
CSS
.bigbox1 {
border: solid 2px #c0c0c0; ←わかりやすくする為に枠線を入れています。
padding:15px;
}
HTML
<div class="bigbox1">
<p><img src="ph1.jpg"></p>
<p><img src="ph2.jpg"></p>
<p><img src="ph3.jpg"></p>
</div>
Flexboxで横並び
画像やテキストを横に並べる時はFlexboxが簡単です。
display: flex;
CSS
.bigbox2 {
border: solid 2px #c0c0c0;
padding:15px;
display: flex;
}
HTML
<div class="bigbox2">
<p><img src="ph1.jpg"></p>
<p><img src="ph2.jpg"></p>
<p><img src="ph3.jpg"></p>
</div>
水平方向の揃え
justify-content
CSS
.bigbox3 {
border: solid 2px #c0c0c0;
padding:15px;
display: flex;
justify-content:space-around;
}
HTML
<div class="bigbox3">
<p><img src="ph1.jpg"></p>
<p><img src="ph2.jpg"></p>
<p><img src="ph3.jpg"></p>
</div>
アイテムの折り返し
アイテムの数が多い時は途中で折り返さないと全部が表示されない場合があります。そんな時は「flex-wrap」プロパティを追加します。
flex-wrap
CSS
.bigbox4 {
border: solid 2px #c0c0c0;
padding:15px;
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
HTML
<div class="bigbox4">
<p><img src="ph1.jpg"></p>
<p><img src="ph2.jpg"></p>
<p><img src="ph3.jpg"></p>
<p><img src="ph4.jpg"></p>
</div>
参考ページ
flexboxのレイアウトに関して下記のページも参考にしてください。