如何用两行元素而不是一行创建侧面滚动条？

Question

我正在尝试创建一个侧面滚动器，每次使用flex时每个可见的两个框（一个在顶部，一个在下面）

正如您在下面的第一堆框上看到的那样，我已经成功地水平滚动了它，但是我希望视图中有两行而不是一行。

.box-flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.box-flex-row > .m4 {
  min-width: 45%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="container">

  <div class="section">
    <div class="row box-flex-row">
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <hr>
  <div class="section">
    <div class="row">
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>

            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>

  <hr class="hr-bottom-line">
  <div class="section">
    <div class="row">
      <h2>Stuff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor, nibh sit amet ultrices gravida, tortor magna pretium nunc, at ultricies ipsum libero ac mi. Sed a dictum turpis. Integer vitae ante sed neque ultrices congue. Sed euismod
        nunc id magna aliquet dictum id id erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porta mauris ut sapien molestie lacinia. Sed ullamcorper purus a lorem porta, et imperdiet mauris imperdiet.
        Nullam sit amet neque nibh. Pellentesque non magna sed diam tincidunt accumsan quis quis magna. Vivamus urna turpis, ornare id malesuada vel, fringilla eget elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
        egestas. Suspendisse posuere mi eget augue scelerisque euismod. Phasellus quis aliquam dolor, et dapibus urna. Proin suscipit et ligula at semper. Ut tristique magna vitae finibus pellentesque. Phasellus tincidunt tortor et sem posuere, et feugiat
        tellus lacinia. Praesent commodo ullamcorper eros quis suscipit. Nam sed justo tortor. Nulla facilisi. Pellentesque ut lacus sit amet lacus mattis aliquet. Morbi eu purus elit. Aenean rhoncus, lectus vitae aliquet fringilla, eros metus fermentum
        metus, vel malesuada arcu turpis non dolor. Curabitur non ex sed est vehicula efficitur. Fusce vel enim in lectus viverra luctus. Fusce ac sapien porttitor, consectetur massa ut, suscipit nulla. Fusce nec massa lobortis, tincidunt ex eget, ultrices
        felis. Vivamus turpis justo, varius vel tincidunt sed, consequat a purus. Aliquam ultrices eros fermentum nunc dignissim, quis maximus eros malesuada. Vivamus non porttitor quam, id efficitur libero. Donec vulputate posuere viverra. Fusce iaculis
        tellus sit amet orci consequat, at sagittis magna rhoncus. Maecenas ac dapibus est, vel auctor lectus. Integer porta lacus dui, eu scelerisque enim iaculis id. Aliquam eget pulvinar nisl. In hac habitasse platea dictumst. Curabitur et rutrum sem.
        Cras viverra pharetra est. Etiam at molestie ipsum. Donec varius pulvinar tortor, in semper lacus. Nunc vel luctus dui. In eu neque et erat eleifend sodales. Pellentesque id ligula sed risus tempor maximus. Quisque turpis felis, condimentum et
        bibendum ac, congue eu arcu. Aenean rutrum ante et dui pharetra, sed mattis risus accumsan. Mauris vulputate venenatis urna, at venenatis purus. In vitae pellentesque arcu. Maecenas fringilla arcu sed dolor sollicitudin, ut aliquet nisi auctor.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dictum lacus et ornare mollis. Suspendisse potenti. Donec eu leo porttitor, ullamcorper arcu at, sagittis augue. Praesent ante urna, pellentesque
        sed interdum in, malesuada sit amet turpis. Mauris imperdiet et ipsum at hendrerit. Nunc facilisis quam eu rutrum cursus. Quisque convallis ante eu ultrices varius. Cras et sapien odio. Morbi quis dui vitae tellus mattis eleifend. Vestibulum posuere
        sapien elit, nec pretium metus pulvinar nec. Aliquam bibendum magna sit amet urna blandit lobortis.</p>
    </div>
  </div>
  <br><br>
</div>

我还创建了一个CodePen示例。这是它的外观以及我希望其外观的图像：

更新： 在下面的答案中，我能够创建所需的确切解决方案：CodePen示例

Answer 1

您有一个flex容器，其中包含一行项目和水平滚动。

您想要两行并水平滚动。

因此，将这两行放在带有flex-direction: column的更大的flex容器中。

为嵌套行容器提供全宽。

将滚动功能添加到较大的容器中。

revised codepen

.section {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.box-flex-row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.box-flex-row > .m4 {
  min-width: 45%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="container">

  <div class="section">

    <div class="row box-flex-row">

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

    </div>

    <div class="row box-flex-row">

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m4">
        <a href="#" style="display: block;">
          <div class="card">
            <div class="card-content">
              <h3 class="black-text">Test</h3>
            </div>
            <div class="card-action" style="border-bottom: 2px solid #1e39ef">
              <p class="blue-grey-text">Lower test</p>
            </div>
          </div>
        </a>
      </div>

    </div>
  </div>
</div>

Answer 2

我搞砸了，我想找到了解决方案。 通过将flex: column和内容高度设置为50％，它将创建两个无限行。 如果希望它在桌面上正常显示，请设置flex: row并使用flex: 0 0 30%将内容的宽度设置为30％。不知道这是否是最好的方法，但这是我发现可行的唯一方法。

.scroll-container{
    width: 70%;
    margin: 0 auto;
    height: 250px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-x: scroll;

}
.scroll-content{
    height: 125px;
    width: 100px;
    background-color:rgb(77, 162, 241);
    flex: 0 0 50%;
    margin: 0;
    padding: 0;
    float: left;
    border-right: 1px solid grey;
}

.scroll-content:nth-child(2n+1){
    background-color: rgb(43, 156, 43); 
}

@media only screen and (min-width: 700px){
    .scroll-container{
        overflow-x: unset;
        flex-direction: row;
        width: 700px;
        justify-content: space-between;
    }
    .scroll-content{
        width: 10px;
        flex: 0 0 30%; 
        margin-top: 20px;
    }
}

<div class='scroll-container'>
    <div class='scroll-content'>Content 1</div>
    <div class='scroll-content'>Content 2</div>
    <div class='scroll-content'>Content 3</div>
    <div class='scroll-content'>Content 4</div>
    <div class='scroll-content'>Content 5</div>
    <div class='scroll-content'>Content 6</div>
    <div class='scroll-content'>Content 7</div>
    <div class='scroll-content'>Content 8</div>
    <div class='scroll-content'>Content 9</div>
    <div class='scroll-content'>Content 10</div>
    <div class='scroll-content'>Content 11</div>
    <div class='scroll-content'>Content 12</div>
    <div class='scroll-content'>Content 13</div>
    <div class='scroll-content'>Content 14</div>
    <div class='scroll-content'>Content 15</div>
    <div class='scroll-content'>Content 16</div>
    <div class='scroll-content'>Content 17</div>
    <div class='scroll-content'>Content 18</div>
    <div class='scroll-content'>Content 19</div>
    <div class='scroll-content'>Content 20</div>
    <div class='scroll-content'>Content 21</div>
    <div class='scroll-content'>Content 22</div>
    <div class='scroll-content'>Content 23</div>
    <div class='scroll-content'>Content 24</div>
    <div class='scroll-content'>Content 25</div>
    <div class='scroll-content'>Content 26</div>
    <div class='scroll-content'>Content 27</div>
    <div class='scroll-content'>Content 28</div>
    <div class='scroll-content'>Content 29</div>
    <div class='scroll-content'>Content 30</div>
    <div class='scroll-content'>Content 31</div>
    <div class='scroll-content'>Content 32</div>
    <div class='scroll-content'>Content 33</div>
</div>

CodePen Example

Answer 3

由于您希望在移动屏幕上两行独立，并且卡要在较大的屏幕上合并在一起（如在一个容器中），因此flexbox可能不是最佳解决方案。

CSS网格也不是最好的解决方案-您可能需要JavaScript-但以下网格概念可能会有用：

codepen demo

.box-flex-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 45%));
  grid-auto-rows: 100px;
  grid-gap: 10px;
  overflow: auto;
  padding: 10px;
  background-color: lightgray;
}

@media (max-width: 601px) {
  .m4:nth-child(-n + 6) {
    grid-row: 1;
  }
  .m4:nth-child(n + 6) {
    grid-row: 2;
  }
  .box-flex-row {
    grid-template-columns: none;
    grid-auto-columns: 45%;
  }
}

.m4 {
  border: 1px solid gray;
  background-color: lightgreen;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m4:nth-child(-n + 6) {
  background-color: lightgreen;
}

.m4:nth-child(n + 6) {
  background-color: orange;
}

body {
  margin: 0;
}

<div class="container">
  <div class="section">
    <div class="row box-flex-row">
      <div class="col s12 m4">test 1 upper</div>
      <div class="col s12 m4">test 2 upper</div>
      <div class="col s12 m4">test 3 upper</div>
      <div class="col s12 m4">test 4 upper</div>
      <div class="col s12 m4">test 5 upper</div>
      <div class="col s12 m4">test 1 lower</div>
      <div class="col s12 m4">test 2 lower</div>
      <div class="col s12 m4">test 3 lower</div>
      <div class="col s12 m4">test 4 lower</div>
      <div class="col s12 m4">test 5 lower</div>
      <div class="col s12 m4">test 6 lower</div>
    </div>
  </div>
</div>