flex布局下元素溢出滚动

能跑就行，。

已于 2022-11-30 17:02:25 修改

阅读量5.8k

点赞数 1

于 2022-11-30 17:02:05 首次发布

本文链接：https://blog.csdn.net/whtis666/article/details/128118415

版权

写杂专栏收录该内容

10 篇文章 0 订阅

订阅专栏

flex布局下元素溢出滚动

在我们平时使用flex布局时，flex布局的子元素大小并不是不变的，就算是我们设置了固定的宽高，其子元素的大小也是弹性变化的，会随着子元素的多少而变化

此时就利用到了对 flex-basis flex-shrink flex-grow 这三个属性的理解，其代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
      使flex布局的元素 溢出滚动  
      给父元素设置 overflow: scroll;
      给子元素设置：
      flex-basis: 100px;  子容器基准大小 表示在不伸缩的情况下子容器的原始尺寸。
      此属性定义了在分配多余空间之前，item 占据的主轴空间（main size）  默认值为auto，即项目的本来大小。
      flex-shrink: 0;  收缩比例  默认为1，即如果空间不足，该 item 将缩小。
      flex-grow: 0;  放大比例  默认为 0  如果存在剩余空间也不放大
    */ 
    .box {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: scroll;
    }
    /* 隐藏滚动条 */
    /* .box::-webkit-scrollbar {
      display: none;
    } */

    .item {
      flex-basis: 100px;
      flex-shrink: 0;
      width: 200px;
      height: 100px;
      background-color: red;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
  </div>
</body>
</html>

能跑就行，。

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
flex布局下元素溢出滚动

在我们平时使用flex布局时，flex布局的子元素大小并不是不变的，就算是我们设置了固定的宽高，其子元素的大小也是弹性变化的，会随着子元素的多少而变化。此属性定义了在分配多余空间之前，item 占据的主轴空间（main size）默认值为auto，即项目的本来大小。子容器基准大小表示在不伸缩的情况下子容器的原始尺寸。此时就利用到了对 flex-basis flex-shrink flex-grow 这三个属性的理解。/* 隐藏滚动条 */
复制链接

扫一扫