无法针对不同的屏幕尺寸居中和弯曲分组元素

Question

我是 HTML 和 CSS 创作的新手，所以我在尝试创建一个不错的 display/layout 元素方面遇到了很多困难 根据不同屏幕尺寸自动调整.

请注意：

这将只是一个单页网站
本网站的内容已被愚蠢的例子所取代。

我想要的：

电脑屏幕:

PC端显示window:

移动端屏幕：

在手机中显示 window:

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

我目前看到的：

当前在 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;
}

无法针对不同的屏幕尺寸居中和弯曲分组元素

Can't Center and Flex Grouped Elements for Different Screen Sizes

html

css

css-position

flexbox

我想要的：

我目前看到的：