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

最新推荐文章于 2023-06-28 21:31:39 发布

KatyLight

最新推荐文章于 2023-06-28 21:31:39 发布

阅读量706

点赞数 1

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

本文链接：https://blog.csdn.net/qq_33014695/article/details/126118254

版权

样式同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

静态页demo

16 篇文章 0 订阅

订阅专栏

<!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>