本文详细介绍了Flex布局的四种常见实例：基本网格布局、百分比布局、圣杯布局和侧边固定宽度布局。通过实例代码展示了如何使用Flex实现灵活的网页布局，包括如何设置flex属性、百分比分配空间、调整元素顺序以及响应式设计。
如果对flex不是很熟悉的同学，可以看一下我的另一篇文章Flex 布局
1、网格布局
1.1、基本网格布局
最简单的网格布局，就是平均分布。
HTML代码如下。
1/2
1/2
1/3
1/3
1/3
CSS代码如下。
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
background: #eee;
margin: 10px;
}
这里最关键的就是flex:1使得各个子元素可以等比伸缩
1.2、百分比布局
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
HTML代码如下。
50%
最低0.47元/天 解锁文章
扫一扫
4628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
