flex布局下 元素溢出滚动
在我们平时使用flex布局时，flex布局的子元素大小并不是不变的，就算是我们设置了固定的宽高，其子元素的大小也是弹性变化的，会随着子元素的多少而变化。此属性定义了在分配多余空间之前，item 占据的主轴空间（main size）默认值为auto，即项目的本来大小。子容器基准大小 表示在不伸缩的情况下子容器的原始尺寸。此时就利用到了对 flex-basis flex-shrinkflex-grow
·
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>
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)