css 响应式 flex 布局列到行

Question

我正在尝试创建一个应该响应的组件。下面是组件的标记

<div class="main-container">

  <div class="weather-card">
    <span> <h2>Singapore  </h2><span>
          <span> 28&deg </span>
  </div>


  <div class="weather-list">
    <div class="week-item">
      <span> Monday </span>
      <span> 25&deg </span>
    </div>
    <div class="week-item">
      <span> Tue </span>
      <span> 35&deg </span>
    </div>
    <div class="week-item">
      <span> Wed </span>
      <span> 45&deg </span>
    </div>
  </div>
  <div class="week-graph">
  </div>
</div>

.main-container {
  display: flex;
  border: 1px solid red;
  height: 500px;
  width: 400px;
  padding: 20px;
  flex-direction: column;
}

.weather-card {
  margin-top: 20px;
}

.weather-list {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
}

.week-item {
  padding: 20px;
}

我希望具有 Weather-list 类的元素具有响应性。这些元素在移动时应一层一层堆叠。指定 flex-flow 无法正常工作。

另外，我应该如何指定整个组件的高度和宽度，以便使用它的人都能正常工作。

这只是标记，您可以在下面的 codesandbox 链接中看到我正在尝试构建的 React 应用

https://codesandbox.io/s/weather-report-rgu7y-regtl

Answer 1

在您的 styles.css 文件中，将您的媒体查询更改为:

@media screen and (max-width: 575px) {
  .weather-container {
    align-items: center;
  }
  .weather-list {
    flex-direction: column;
  }
}

会让所有东西都堆在中间。