不能为不同的屏幕尺寸居中和弯曲分组元素

Question

我对 HTML 和 CSS 创作非常陌生，所以我在尝试创建一个可以根据不同屏幕尺寸自动调整的漂亮元素的显示/布局方面付出了很多努力。

请注意：

1. 这将只是一个单页网站

2. 本网站的内容已被愚蠢的例子取代。

我想要什么：

电脑屏幕：

在 PC 窗口上显示：

移动屏幕：

在移动窗口中显示：

。 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

我目前看到的：

它目前在 PC 屏幕上的显示方式：

它当前在移动视图上的显示方式：

这是我的代码：

.header {
  padding: 40px;
  text-align: center;
  background: #4169E1;
  flex-direction: column;
  flex-wrap: wrap;
}

h1 {
  color: white;
  font-family: arial;
  font-style: bold;
  font-size: 64px;
  text-align: center;
}

h2 {
  color: #8B0000;
  font-family: arial;
  font-style: bold;
  font-size: 36px;
  text-align: center;
}

h3 {
  font-family: arial;
  font-style: bold;
  font-size: 24;
  text-align: center;
  padding-left: 50px;
  padding-right: 50px;
}

p {
  font-family: arial;
  font-size: 16;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  padding-bottom: 50px;
}

.box {
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

table {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  float: center;
  font-family: arial;
}

<div class=header>
  <h1>YUP.</h1>
</div>
<div class="container">
  <h2>SUB TITLE</h2>
</div>
<div class="box">
  <div>
    <h3><img src="https://images.pexels.com/photos/19677/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Square" style="width: 200px; height: auto;"><br>SUCH A SQUARE</h3>
  </div>
  <div>
    <h3><img src="https://images.pexels.com/photos/580679/pexels-photo-580679.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Circle" style="width: 200px; height: auto;"><br>ECLIPSE OF THE HEART</h3>
  </div>
  <div>
    <h3><img src="https://images.pexels.com/photos/3802667/pexels-photo-3802667.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Triangle" style="width: 200px; height: auto;"><br>TRY ME</h3>
  </div>
  <div>
    <h3><img src="https://images.pexels.com/photos/735871/pexels-photo-735871.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Star" style="width: 200px; height: auto;"><br>Starry Night</h3>
  </div>
</div>
<div>
  <p>
    <table>
      <tr>
        <th style="text-align: left;">THIS BUILDING</th>
        <th style="text-align: left;">HOURS OF OPERATION:</th>
      </tr>
      <tr>
        <td>1234 This Address Rd.</td>
        <td>MONDAY-THURSDAY: 8am - 5pm</td>
      </tr>
      <tr>
        <td>Fake City, IL 12345</td>
      </tr>
    </table>
  </p>

Answer 1

代码有很多错误，但要使框 div 响应，您可以执行以下操作：

.box {
  display: flex;
  width: 100%;
  height: 200px;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.box div {
  flex: 1 1 220px;
  text-align: center;
}