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>

在上面的标记中，“天气列表”类中的项目应并排显示。并且在使用移动设备时，它们应该显示在另一个下方。

Answer 1

您也必须弯曲.weather-list。 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;
}

CSS Flexbox将列方向更改为行

2 个答案: