常见布局—弹性布局

最新推荐文章于 2024-06-13 14:28:39 发布

坏丶毛病

最新推荐文章于 2024-06-13 14:28:39 发布

阅读量1w

点赞数 4

分类专栏： HTML-成长之路 CSS-成长之路文章标签： css 弹性布局弹性盒坏丶毛病 flex

一只努力学习进步的web前端小菜鸟。转载请声明来源。

本文链接：https://blog.csdn.net/qq_43363884/article/details/88836696

版权

CSS-成长之路同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

HTML-成长之路

8 篇文章 0 订阅

订阅专栏

在常见的布局中，通常有一部分是固定高度，而其他部分是剩余大小分配的，这种情况我们可以使用弹性布局。

说到弹性布局，就得介绍一下css属性中的弹性盒——display:flex

它分为主轴和交叉轴两个方向，没有固定的方向，默认主轴是X轴，交叉轴是Y轴，也可以通过属性 flex-direction: column来设置主轴为Y轴

主轴是X轴，意味着它会把子元素横向排列，所有子元素都到一行，Y轴也就是反过来的。

主轴对齐方式——justify-content: center;（这里我选择的是居中对齐）

交叉轴对齐方式——align-items: center;（这里我选择的是居中对齐）

那我们来实现几个小例子：

（1）、设置两个元素横向排列

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		.box{
			width: 100%;
			height: 300px;
			display: flex;
		}
		.left{
			width: 50%;
			height: 300px;
			background: lightblue;
		}
		.right{
			width: 50%;
			height: 300px;
			background: pink;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</body>
</html>

效果：

（2）、设置上下两部分，上部固定高度，下部占剩余部分，其中下部左边固定，右边占剩余部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		.box{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
		}
		.top{
			width: 100%;
			height: 200px;
			background: lightblue;
		}
		.content{
			flex: 1;
			display: flex;
		}
		.left{
			width: 300px;
			height: 100%;
			background: pink;
		}
		.right{
			flex: 1;
			background: orange;
		}
	</style>
</head>
<body>
	<div class="box">

		<div class="top"></div>

		<div class="content">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		
	</div>
</body>
</html>

这里解释一下，flex是在父元素中有 display:flex的情况下，这个元素占父元素的大小减去其他子元素的大小，即剩余全部大小

效果：

弹性盒还有很多属性，这里就不一一介绍了，如果有需要，大家可以自行去了解。

如有疑问，也可以咨询博主。

好了，这次就介绍到这里。

如有问题，请指出，接受批评。

个人微信公众号：

坏丶毛病

关注

4
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
常见布局—弹性布局

在常见的布局中，通常有一部分是固定高度，而其他部分是剩余大小分配的，这种情况我们可以使用弹性布局。说到弹性布局，就得介绍一下css属性中的弹性盒——display:flex它分为主轴和交叉轴两个方向，没有固定的方向，默认主轴是X轴，交叉轴是Y轴，也可以通过属性 flex-direction: column来设置主轴为Y轴主轴是X轴，意味着它会把子元素横向排列，所有子元素都到一行，Y轴也...
复制链接

扫一扫