レスポンシブサイトの作成の際にメンテナンスのしやすいflexboxを使用した横並びの方法を紹介します。
HTML
<div class="works-inner-items flex">
<div class="works-inner-item">
<a href="img/難波.jpg" data-lightbox="group" data-title="No.1" >
<img src="img/難波.jpg" alt="難波">
</a>
<h2 class="font-title">NAMBA</h2>
</div>
<div class="works-inner-item">
~~ 中略 ~~
</div>
<div class="works-inner-item">
~~ 中略 ~~
</div>
<div class="works-inner-item">
~~ 中略 ~~
</div>
<div class="works-inner-item">
~~ 中略 ~~
</div>
<div class="works-inner-item">
~~ 中略 ~~
</div>
css
.works-inner .works-inner-items {
width: 90%;
margin-top: 8rem;
display: flex;
flex-wrap: wrap;
}
.works-inner .works-inner-items .works-inner-item {
padding: 1rem;
width: 30%; //親要素 width: 90% に対して、3分割
}
@media (max-width: 1024px) {
.works-inner .works-inner-items .works-inner-item {
width: 50%;
}
}
@media (max-width: 600px) {
.works-inner .works-inner-items .works-inner-item {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
コードの説明
必要なプロパティはたった3つです。
・box-sizing: border-box
paddingとborderの幅を要素の幅と高さに含めるというコードです。
要はボックスの内側にborder、paddingが入ります。
・display: flex
並べたい要素の親要素に対して指定すると直下の要素を横並び(並列)します。
念のためにIEのベンダープレフィックスを入れましょう。
・ flex-wrap: wrap
display: flexで横並びさせた要素を回り込みさせます。
例えば、横並びの列数を2列、子要素のボックスを50%とした場合に子要素が4つあると
200%( 50% × 4つの要素 )になるためWidthを無視して横方向に4つ並んでしまいます。
これを解除して子要素が100%を超えた場合は回り込むようになります。
念のためにIEのベンダープレフィックスを入れましょう。
media screeでブレイクポイント、widthで並び数、paddingで各要素のクリアランスなどを調整して使ってください。
↧