【css】flex-shrink：0的方法让div横向滚动。

KatyLight

于 2022-08-05 14:45:08 发布

阅读量786

点赞数 1

分类专栏：样式静态页demo 文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/qq_33014695/article/details/126118254

版权

样式同时被 2 个专栏收录

32 篇文章

订阅专栏

静态页demo

16 篇文章

订阅专栏

这个示例展示了如何使用CSS来定制滚动条的样式，创建一个水平滚动的布局。通过设置`.row`类的`overflow-x: scroll`和`width: 100vw`属性，实现了水平滚动效果。每个`.item`元素都有固定宽度和自定义背景色，并用CSS计数器显示编号。整体布局旨在适应不同数量的块状元素，同时保持良好的可读性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .row {
      width: 100vw;
      /*justify-content: space-between;*/
      /*white-space: nowrap;*/
      overflow-y: hidden;
      overflow-x: scroll;
      display: flex;
      /*flex-wrap:nowrap;*/
      counter-reset: ii;
    }

    .item {
      width: 100px;
      height: 100px;
      background-color: #17705b;
      margin: 10px;
      border-radius: 10px;
      flex-shrink: 0;
      text-align: center;
      display: inline-block;
    }

    .item::after {
      counter-increment: ii;
      line-height: 100px;
      font-weight: bolder;
      vertical-align: middle;
      font-size: 40px;
      content: counter(ii);
      color: white;

    }

    body {
      counter-reset: ii;
      padding: 0;
      margin: 0;
    }
  </style>
</head>
<body>
<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>

</div>
</body>
</html>