flex与布局（基本网格布局、百分比布局、一侧固定一侧自适应、圣杯布局）

最新推荐文章于 2024-04-29 11:29:04 发布

置顶

pdsu_zhao

最新推荐文章于 2024-04-29 11:29:04 发布

阅读量1.6w

点赞数 2

分类专栏： Flex布局文章标签：两端对齐 marginauto block 网格布局媒体查询

本文链接：https://blog.csdn.net/zxy9602/article/details/53150329

版权

1、基本网格布局

分情况讨论：

（1）如果所有的项目有相同的结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex-shrink压缩</title>
		<style>
			.container{
				padding-top:20px;
				display: flex;
				width: 500px;/*当容器container的宽度200<项目item的宽度150*2  */
				height: 400px;
				background-color:#fff;
				 border: 2px solid #ddd;
			}
			.item{
				height: 30px;
				flex-grow: 1;
				flex-basis: 50%;
			}
			.item1{
				background-color: #ccc;
			}
			.item2{
				background-color: #999;
			}
		</style>
	</head>
	<body>
		<pre>
			希望两个项目的宽度是相同的，评分整个容器的宽度。
		</pre>
		<div class="container">
			<div class="item item1">1</div>
			<div class="item item2">2</div>
			<div class="item item2">2</div>
		</div>
	</body>
</html>

在上述案例代码中，由于item1，item2的flex-grow均为默认值，所以三个均平分。

2、百分比布局

作用：希望多个项目的宽度的比例是固定的。

若为3个：item1、item2、item3

item1——flex：1 1 aut

最低0.47元/天解锁文章

pdsu_zhao

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
flex与布局（基本网格布局、百分比布局、一侧固定一侧自适应、圣杯布局）

1、基本网格布局分情况讨论：（1）如果所有的项目有相同的结构 flex-shrink压缩 .container{ padding-top:20px; display: flex; width: 500px;/*当容器container的宽度200<项目item的宽度150*2 */ height: 400px;
复制链接

扫一扫