佛山 两学一做 网站,影楼网站制作,山东省济南市莱芜区,网站怎么做详情页1.利用flex分配剩余高度/宽度 情景#xff1a;父组件高度一定#xff0c;子组件中#xff0c;其他子组件高度固定#xff0c;一个子组件高度不确定#xff08;页面滚动列表#xff09;
.father{display: flex;flex-direction: column;.son1{height: 200px;}.son2{//或 …1.利用flex分配剩余高度/宽度 情景父组件高度一定子组件中其他子组件高度固定一个子组件高度不确定页面滚动列表
.father{display: flex;flex-direction: column;.son1{height: 200px;}.son2{//或 flex-grow: 1;flex:1;}
}当子组件的内容超出了容器的高度(父组件)时候需要使用overflow属性控制溢出推荐或是限制子组件的最大高度。 多重嵌套的时候父组件中也有flex:1同样需要使用overflow属性控制溢出
注释
“flex: 1;” 是一个CSS属性用于指定弹性容器内弹性项目的伸缩能力和分配比例。它可以接受三个可能的值分别是
flex-grow: 1表示项目可以根据需要自动拉伸并占据剩余空间。如果一个项目具有flex-grow: 1而其他项目没有指定该值那么具有flex-grow: 1的项目将占据所有剩余空间。flex-shrink: 1表示项目可以在空间不足时自动收缩。如果弹性容器的空间不足以容纳所有项目具有flex-shrink: 1的项目将相对于其他具有更高flex-shrink值的项目进行收缩。默认情况下所有项目的flex-shrink值为1。flex-basis: 0表示项目的初始大小为0。这意味着项目将根据容器中的可用空间进行分配以填充剩余空间。如果没有设置具体的flex-basis值那么默认为0。
