DIV横並びで回り込みも
投稿日:2017年8月24日 更新日:
Webサイトを作るときに、画像やメニューなどを横並びにして、しかもレスポンシブ対応にしたい!
そんなことを思ったことがあると思います。(きっと 😛 )
いろんな方法がありますが、簡単にできる方法をご紹介します。
flexboxっていうやつ
下のような感じにしたかったら、コピーすれば簡単にできますよ♪
基本的なHTMLは下記を使います。
<div class=”flextitle”>この部分は画像やタイトル(作ってみただけ)</div>
<div class=”wrap negative”>
<div class=”boxdemo”><p>boxA</p></div>
<div class=”boxdemo”><p>boxB</p></div>
<div class=”boxdemo”><p>boxC</p></div>
<div class=”boxdemo”><p>boxD</p></div>
<div class=”boxdemo”><p>boxE</p></div>
<div class=”boxdemo”><p>boxF</p></div>
</div>
次に、CSSはこんな感じ
width:100%;
height:50px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:20px;
background:#bdb76b;
}
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
display:flex;
justify-content:center;
align-items:center;
height:200px;
width:47%;
margin-right:3%;
margin-bottom:20px;
background:#228b22;
}
color:#fff;
}
margin-right:-3%;
}
width:30.333%;
}
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
関連記事
-
-
ブログ (blog) は、ウェブサイトの一種で、「WebをLogする」という意味でウェブログ (weblog) と名付けられ、それが略されてブログ(Blog)と呼ばれるようになった。 作者の個人的な日 …
-
-
規制対象外の小型ドローン 国内では現在200g未満のドローンは申請が入らないので、簡単に飛ばすことができます。 ただ、当たり前ですが危険な場所はやめた方がいいです。 大きさはスマホくらいで、ちょっとが …
- PREV
- ポイント&懸賞でお得
- NEXT
- divを重ねて上下中央