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

我希望“天气列表”类别的项目能够响应。这些物品在移动设备中应堆叠在另一个之上。指定弹性流无法正常工作。

我还应该如何指定整个组件的高度和宽度，以便在消耗它的人中都能正常使用。

这只是标记，您可以在下面的codeandbox链接中看到我尝试构建的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;
  }
}

将所有内容堆叠在中间。

CSS响应式Flex布局到行

1 个答案: