css flexbox 将列方向更改为行

Question

我目前有一个列布局属性。

对于其中一个类(class)，我希望它排成一排。

下面是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-list。 Flex 仅适用于 flex 父元素的子元素

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