css отзывчивый гибкий макет столбец в строку

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 не работает должным образом.

Также, как мне указать высоту и ширину всего компонента, чтобы он работал правильно, кто бы его ни потреблял.

Это просто разметка, вы можете увидеть приложение реакции, которое я пытаюсь встроить, по ссылке codeandbox ниже

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

Получит все, чтобы сложить посередине.