inline-blockを使っています。スマホ画面にしても横並び一直線にしたいです。

Question

画像のような並びに表示がしたいです。

ですが、<meta name="viewport" content="width=device-width,initial-scale=1">
を使って、スマホ画面に表示させるとどうしても下のような並びになってしまいます。

<meta name="viewport" content="width=device-width,initial-scale=1">を付けないと、表示が小さいので、どうにかして３つのinline-blockがどんな画面幅でも横並びになるような方法を教えてください。
よろしくお願いします。

<!--index.php-->
 <div>
      <div class="box1 boxstyle" id="box_0" data-id="0"><br>犯罪や非行<br><br>快</div>
      <div class="prob inline"><?= h($quiz[0]); ?></div>
      <div class="box1 boxstyle" id="box_1" data-id="1"><br><br>不快</div>
 </div>

//style.css
.boxstyle {
  width: 230px;
  height: 140px;
  opacity: 0.5;
  cursor: pointer;
  
  color: #000;
  font-size: 30px;
  font-weight: bold;
  line-height: 20px;
  
  vertical-align: middle;

  display: inline-block;
  
  cursor: pointer;
  border-radius: 30px;
  font-weight: bold;
  background: #00aaff;
  box-shadow: 0 4px 0 #0088cc;
  color: #000;


.prob{
  width: 250px;
  height: 250px;
  opacity: 1.0;
  color: #000;
  font-size: 48px;/*48*/
  font-weight: bold;
  line-height: 150px;
}


.inline{
  display: inline-block;
}
}

Answer 1

@mediaで一定の幅以下のときにdisplay: flexを指定してください。

@media screen and (max-width: 480px) {
  .flex {
    display: flex;
  }

  .flex .boxstyle,
  .flex .prob {
    font-size: 20px;
  }
}

質問にあるCSSの括弧の閉じる箇所は間違っています。
あと質問タイトルは正しくはinner-blockではなくinline-blockなので
修正をお願いします。

Comments

[CopanSassa]

yasutomiさん、ご指摘とご回答ありがとうございます。
質問の方は変更させていただきました。

きれいにコーディングができるようになるのは、やはり経験でしょうか？

試してみます！！

[yasutomi]

> きれいにコーディングができるようになるのは、やはり経験でしょうか？
経験もありますが、使用するエディタ、エディタ設定、エディタの拡張機能も重要です。
私は基本的にはVS Codeというエディタを使用しています。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

[CopanSassa]

なるほど、いろいろと細かいアドバイスまでありがとうございます。