DIV横並びで回り込みも | | Webサービス一覧のひとりごと

DIV横並びで回り込みも

投稿日：2017年8月24日更新日：2017年8月25日

Webサイトを作るときに、画像やメニューなどを横並びにして、しかもレスポンシブ対応にしたい!

そんなことを思ったことがあると思います。（きっと 😛 ）

いろんな方法がありますが、簡単にできる方法をご紹介します。

flexboxっていうやつ

下のような感じにしたかったら、コピーすれば簡単にできますよ♪

基本的なHTMLは下記を使います。

<div class=”flextitle”>この部分は画像やタイトル（作ってみただけ）</div>

次に、CSSはこんな感じ

/* スマホ用 */

.flextitle{
width:100%;
height:50px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:20px;
background:#bdb76b;
}

.wrap{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}

.wrap .boxdemo{
display:flex;
justify-content:center;
align-items:center;
height:200px;
width:47%;
margin-right:3%;
margin-bottom:20px;
background:#228b22;
}

.wrap .boxdemo p{
color:#fff;
}

.negative{
margin-right:-3%;
}

/* タブレット用 */

.wrap .boxdemo{
width:30.333%;
}

/* PC用 */

.wrap .boxdemo{
width:22%;
}

上記CSSの補足として、

.flextitle これは、横並びとは関係ないですが、横並びに配置されたDIV（緑の四角）がこのタイトルの両端に揃っているというのが言いたかっただけです。

.negative これは、.wrapの中に書き込めば省略できますが、あえてわかりやすくするため別にしました。これでmarginをマイナスにすることで、タイトルの端と揃えることができました。

ちょっとこだわっただけです。 😆

.wrap .boxdemo これは、DIV（緑の四角）の中に文字を入れたい場合、なおかつ上下中央に文字を配置したいと思い、

《display:flex;》

《justify-content:center;》

《align-items:center;》を記入してやることで可能になりました。

あと、レスポンシブ対応ということでDIV（緑の四角）の幅を％指定にしています。

これにより、スマホでは横に2つ、タブレットでは横に3つ、PCでは横に4つという配置になります。

簡単ですね 😀

この部分は画像やタイトル（作ってみただけ）

boxA

boxB

boxC

boxD

boxE

boxF

執筆者：web