本文介绍如何使用CSS Flex布局将元素以竖向方式显示，并通过设置flex属性实现弹性盒中元素的固比模型，即在有固定宽度元素存在的情况下，剩余元素基于空余空间横向对齐。
这是我们即将要实现的样式
外部框class="out" flex默认为横向显示，设置为以列（竖向）方式显示
.out{
display:flex;
flex-direction:column;
}
内部显示五个边框的所有 class="in"
.in{
display:flex;
flex:1;
}
在弹性盒中，若有一个固定宽度，剩下的属性可以设置基于当前弹性盒中flex=1占用空余的，来实现横向对齐（固比模型）
CSS之flex弹性盒模型
最新推荐文章于 2025-06-13 00:27:51 发布
扫一扫
2332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
