多种布局方式，很有意思

最新推荐文章于 2024-06-12 21:00:00 发布

丑小鸭变黑天鹅

最新推荐文章于 2024-06-12 21:00:00 发布

阅读量591

点赞数

分类专栏： css日常总结文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_41880073/article/details/114921343

版权

多种布局方式，很有意思

一、利用grid实现居中效果
二、自适应布局
三、经典侧边栏
四、固定的页眉页脚
五、圣杯布局
六、RAM技巧
七、卡片弹性适应性
八、使用夹具实现流体印刷
九、aspect-ratio

本篇文章的技巧都是基于学过grid布局，懂其原理的基础上。如果还不知道grid布局，请坐飞机看博主另一篇文章
超级强大的grid布局

一、利用grid实现居中效果

在没有和flex和grid之前，垂直居中一直不能很优雅的实现。而现在，可以结合我们grid和place-items优雅的实现同时水平居中和垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent {
    
				display: grid;
				place-items: center;  /* 让其内部的项目居中显示*/
				width: 300px;
				height: 300px;
				background-color: aqua;
				resize: both;    /* 让这个盒子可以自由缩放*/
				overflow: auto;
			}
			
			.child {
    
				width: 50px;
				height: 50px;
				line-height: 50px;
				background-color: blueviolet;
				border: 1px solid blue;
				border-radius: 10px;
				text-align: center;
				color: azure;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child" contenteditable="true">;;;</div>
		</div>
	</body>
</html>

效果如图：
最初的画面
在这里插入图片描述
当你把外层盒子缩小放大的时候，可以看到里面的小盒子依然居中显示

二、自适应布局

1、在视口足够的时候，三个框固定宽度横放
2、在视口不够的时候（宽度在移动上面），宽度仍然固定，，但是会自动变化，不在同一水平面上

flex:flex-grow flex-shrink flex-basis;
flex-grow：定义项目的的放大比例；

默认为0，即即使存在剩余空间，也不会放大；
所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。
flex-shrink：定义项目的缩小比例；

默认为1，即如果空间不足，该项目将缩小；
所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
flex-shrink为0：空间不足时，该项目不会缩小；
flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。
flex-basis：定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，

默认值为auto，即项目原本大小；
设置后项目将占据固定空间。
所以flex属性的默认值为：0 1 auto （不放大会缩小）
flex为none：0 0 auto （不放大也不缩小）
flex为auto：1 1 auto （放大且缩小）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parent {
    
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
				border: 1px solid black;
				resize: both;
				overflow: auto;
			}
			
			.child {
    
				flex: 0 1 90px; /*  No stretching: */
				margin: 5px;
				background-color: #00FFFF;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child">1</div>
			<div class="child">2</div>
			<div class="child">3</div>
		</div>
	</body>
</html>

最初的画面，因为此时三者的宽度值和没有超过外层盒子的宽度
在这里插入图片描述
当缩小一定程度时

再缩小

当吧flex: 0 1 90px;改为flex: 1 1 90px;
最初的画面

当缩小时，我们可以看到，和上面的情况有所不同，第3个子盒子自动拉伸了。

再缩小，可以看到，也被拉伸了。

最低0.47元/天解锁文章

丑小鸭变黑天鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多种布局方式，很有意思

多种布局方式，很有意思一、利用grid实现居中效果二、自适应布局三、经典侧边栏四、固定的页眉页脚五、圣杯布局六、RAM技巧七、卡片弹性适应性八、使用夹具实现流体印刷九、aspect-ratio本篇文章的技巧都是基于学过grid布局，懂其原理的基础上。如果还不知道grid布局，请坐飞机看博主另一篇文章超级强大的grid布局一、利用grid实现居中效果在没有和flex和grid之前，垂直居中一直不能很优雅的实现。而现在，可以结合我们grid和place-items优雅的实现同时水平居中和垂直居中
复制链接

扫一扫