ボックスを横並びについて。スマホでは縦並びに。

Question

<div class="box">
    <div class="box-title">ここにタイトル</div>
    <p>ここに文章</p>
</div>

.box {
    margin: 2em 0;
    background: #dcefff;
}
.box .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box p {
    padding: 15px 20px;
    margin: 0;
}

同じ大きさのボックスをコンテツ幅で均等に３列に並べたいです。
スマホでみた時には、ボックスが縦に並ぶようにするにはどうしたらいいでしょうか。
ボックスは横いっぱいになってしまいます。

Comments

[sousuke]

画像と提示されたhtmlの乖離が激しく、回答は難しいかと。cssも端折っているようなので、もう少し情報を提供してください

[reiNaka]

申し訳ありません。
http://www.kitaq-src.jp/
このサイトのようにボックスを横並びにしたいのですが。

上のコードのボックスは横に広がってしまいます。

Answer 1

コード拝見しました。
メディアクエリを利用して、display flex　と display block　を切り替えると良いと思います。
以下のように書けます。

 .flexbox {
     display: flex;
 }

 @media screen and (max-width: 767px) {
     .flexbox {
         display: block;
     }
 }

displayの指定は .boxの親要素にすると良いです。以下ように書くと良いです。

<div class="flexbox">
  <div class="box">
    <div class="box-title">ここにタイトル</div>
    <p>ここに文章</p>
  </div>
  

  ...他のboxをここに書く

</div>

3つのボックスサイズが均等になるように表示するとのことですが、これに関してはサイズを%やem、remなどを用いて指定すると良いと思います。

Comments

[reiNaka]

スマホではうまくできました。
均等に並べるために
％　
calc(100%/3);
のようなのを入れるのは分かったのですが…

[ToyoshimaHi]

.flexbox にjustify-content: space-between;とwidth: 100%;を指定して、.boxにwidth: 30%;等を指定すると良いと思います！
他にもいろいろやり方はあると思うので、[css 要素　均等]や[css size指定]などで検索すると情報が出てきます。 それぞれに関して詳しく知りたい場合は http://www.htmq.com/css3/ こういうリファレンスで調べると良いかもしれません。

[reiNaka]

justify-content: space-between;　いれてみてたところでした！！
できました！！！
ありがとうございました。

[reiNaka]

できたんですが…
次スマホ表示の方が元に戻ってしまいました…

[ToyoshimaHi]

@media screen and (min-width: 767px) {
.flexbox {
justify-content: space-between;
width: 100%;
}
.box{
width: 30%
}
}

のように、pcの場合もメディアクエリで指定してあげると良いと思います。
(pcはmin-width: 767px、スマホはmax-width: 767px)

[reiNaka]

できました！！！
ありがとうございました。