Question

我正在尝试不使用Javascript。我有一个具有相同宽度的盒子列表，但是第一个孩子的高度不同；

我正在使用flex来连续显示列表，以便在框之间水平滚动。但是在移动分辨率中，我希望flex将第一个元素放在第一行，其余的放在第二行。

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

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>

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

1 个答案: