html - CSS Flex，如何显示具有自定义顺序和水平滚动功能的列表

Question

我尽量不在这上面使用 Javascript。我有一个宽度相同的盒子列表，但第一个 child 的高度不同；

我使用 flex 来连续显示列表，这样我就可以在框之间水平滚动。但在移动分辨率下，我希望 flex 将第一个元素放在顶行，其余元素放在第二行。

如果我将 flex-flow 设置为换行，我可以实现，但随后我松开了滚动。我能找到的最接近的东西是这个，但没有水平滚动。

Jsfiddle Demo approach 从 CSS flex, how to display one item on first line and two on the next line

.section {
  display:flex;
  flex-flow: row nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.home_box{
  flex: 0 0 auto;
  width:60%;
  height: 300px;
  background-color: #abc;
  margin: 20px;
}

.home_box:first-child{
  height: 600px;
}

<div class="section menu_section_1">
            <div class="home_box box_2"></div> 
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
            <div class="home_box box_2"></div>
</div>

Answer 1

尝试使用以下代码段。您可能需要调整 div 宽度内的第二部分，但您可以检查外部结构并应用媒体查询来实现您想要的。

.section {
  display: flex;
  flex-flow: row wrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.second-section {
  display: flex;
  flex-flow: row nowrap;
  flex-grow:1;
}

.home_box {
  flex: 0 0 auto;
  width: 60%;
  height: 300px;
  background-color: #abc;
  margin: 20px;
}

.first-section {
  height: 600px;
}

@media (min-width: 576px) {
  .section {
    flex-flow: row nowrap;
  }
}

<div class="section menu_section_1">
  <div class="home_box box_2 first-section"></div>
  <div class="second-section">
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
    <div class="home_box box_2"></div>
  </div>
</div>