css flexbox изменить направление столбца на строку

Question

В настоящее время у меня есть свойство макета столбца.

Для одного из классов, я хочу, чтобы он был размещен в строке.

Ниже приведен HTML

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

.weather-card {
  margin-top: 20px;
  border: 1px solid red;
}

.weather-list {
  flex-direction: row;
}

.week-item {
  border: 1px solid green;
}

<div class="main-container">

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


  <div class="weather-list"> //items below should be shown one beside other
    <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>

В приведенной выше разметке элементы класса Weather-list должны отображаться рядом.А при использовании мобильного они должны показываться один под другим.

Answer 1

Вы должны также согнуть список .weather. Flex работает только для дочерних элементов flex parrent

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

}

.weather-card {
  margin-top:20px;
  border: 1px solid red;
}

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

.week-item{
  border: 1px solid green;
}

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

Answer 2

Я думаю, что вам нужен вложенный flexbox, то есть .main-container является родительским flexbox, а .weeather-list - дочерним flexbox.Добавление строки в .weather-list может это реализовать.

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