[分享]css两行多列横向滑动

在网页设计中，我们经常需要展示多列数据，而横向滑动则是一种较为常见的方式。在CSS中，我们可以使用Flexbox或Grid来实现这种效果。.container{ display: flex; over...

在网页设计中，我们经常需要展示多列数据，而横向滑动则是一种较为常见的方式。在CSS中，我们可以使用Flexbox或Grid来实现这种效果。

.container{
  display: flex;
  overflow-x: auto;
}

.item{
  flex: 0 0 auto;
  width: 300px;
  margin-right: 20px;
} 

以上是使用Flexbox实现两行多列横向滑动的基础代码。首先在父容器中设置display为flex，并且将overflow-x设置为auto，以实现横向滑动。接下来，设置每个子元素的宽度为300像素，并且设置margin-right为20像素，以便展示多列数据。

如果我们想在每行中展示更多的列，则可以将.container中的flex-wrap属性设置为wrap。这样，子元素就会自动换行。代码如下：

.container{
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
}

.item{
  flex: 0 0 calc(25% - 20px);
  margin-right: 20px;
} 

在以上代码中，我们将父容器的flex-wrap属性设置为wrap，子元素将会自动换行。同时，我们将每个子元素的宽度设置为25%（减去margin-right的20像素），这样每行就可以展示四列数据。

最后，我们还可以使用Grid来实现两行多列横向滑动。代码如下：

.container{
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  grid-gap: 20px;
  overflow-x: auto;
} 

在以上代码中，我们使用了Grid来布局子元素。grid-template-columns属性设置了每列的宽度为300像素，使用repeat和auto-fit属性可以自动适应父容器的宽度。同时，我们设置了grid-gap属性为20像素，以便展示多列数据。

无论使用Flexbox还是Grid，实现两行多列横向滑动都非常简单。通过设置父容器的display属性和子元素的宽度、margin等属性，我们就可以轻松实现一个漂亮的横向滑动效果。