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;
  }
}

將所有東西都堆疊在中間。