当flex-direction: column时,设置flex:1不生效解决办法

竹子js

于 2024-06-21 16:42:16 发布

阅读量327

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/bamboozjy/article/details/139864697

版权

当需求是: 页面纵向排列,且最后一个元素撑满剩余高度

flex:1在横向排列时是可以的,但是纵向排列会失效,此时需要给最后一个子元素设置align-self: stretch;即可撑满剩余高度


<div class="father">
	<div class="child child1"></div>
	<div class="child child2"></div>
	<div class="child child3"></div>
</div>



.father{
    height: 100%;
	display: flex;
	flex-direction: column;
	.child1{
		height: 200px;
	}
	.child2{
		height: 100px;
	}
	.child3{
		align-self: stretch;
        overflow:auto
	}
}