flex布局下 元素溢出滚动
在我们平时使用flex布局时，flex布局的子元素大小并不是不变的，就算是我们设置了固定的宽高，其子元素的大小也是弹性变化的，会随着子元素的多少而变化
此时就利用到了对 flex-basis flex-shrink flex-grow 这三个属性的理解，其代码如下
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divclass="box"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div><divclass="item">4</div><divclass="item">5</div><divclass="item">6</div><divclass="item">7</div></div></body></html>
本文转载自: https://blog.csdn.net/whtis666/article/details/128118415
版权归原作者 小涛学前端 所有， 如有侵权，请联系我们删除。
版权归原作者 小涛学前端 所有， 如有侵权，请联系我们删除。