关于 flex 布局在日常工作中的使用

最新推荐文章于 2024-08-16 14:53:15 发布

李小斌96

最新推荐文章于 2024-08-16 14:53:15 发布

阅读量307

点赞数

分类专栏：前端-基础问题文章标签：前端 css flex 布局 flex布局

本文链接：https://blog.csdn.net/lb1135909273/article/details/116295047

版权

前端-基础问题专栏收录该内容

29 篇文章 1 订阅

订阅专栏

前端人员大部分其实觉得样式贼简单，感觉JS才有挑战性，忽略了样式的重要性，导致写出来的页面适配性不高。

其实现在常用的比较好的布局为 flex 和 grid。

工作过程中，发现好多人依旧在布局的过程中死磕 position 和 float，导致页面换了分辨率就掉下来，或者就乱掉了。

所以总结一下我经常在工作中常用的一些 flex 布局的用法，也是为了不用每次用到都要打开阮一峰的博客来搜索。

这里也并不是说哪种好哪种不好，只是要灵活使用，不能死磕！！！

（若总结出错可联系博主，仅用于学习交流）

先放上基础用法：Flex 布局教程：语法篇

宫格布局

此部分应该为最简单的用法，就是宫格布局

不论是在移动端还是PC端，宫格布局都是最常见也适合使用 flex 布局的样式。

关于宫格布局我做过总结，这里不再赘述，直接跳转访问 —— 小程序宫格布局

左右上下居中

之前刚学习前端的时候，最常见的考题就是让父元素中的子元素上下左右居中。那时候最常用的方法就是 margin: 0 auto;当然是用这一行代码也有许多先决条件

看其中代码，可以知道如果只是给子元素给定 margin: 0 auto; 只能左右居中，上下并不能居中。

在这里插入图片描述

经过百度得出可以上下左右居中的代码为：

<style>
	.father {
		border: 1px solid black;
		width: 800px;
		height: 500px;
		position: relative;
	}
	.son {
		width: 100px;
		height: 100px;
		background: red;
		margin:auto;
		left:0;
		right:0;
		top:0;
		bottom:0;
		position:absolute;
	}
</style>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>

结果如下：

在这里插入图片描述
当我们是用 flex 布局的时候几行代码就可以解决

<style>
	.father {
		border: 1px solid black;
		width: 800px;
		height: 500px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.son {
		width: 100px;
		height: 100px;
		background: red;
	}
</style>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>

结果如成功页面，不再重复写了，大家可以看到这里我们的代码其实简化了不少。

两个子元素一左一右

此种常见于左边显示 title，右边显示箭头或者更多字样

之前的常用方法为：给父元素 padding ，然后左浮动，右浮动，当然这里要注意清除浮动，好多新手都忘了清除浮动，以至于元素空间全部都是0了

常规做法：

<style>
	.father {
		border: 1px solid black;
		width: 200px;
		/*height: 100px;*/
		padding: 10px 20px;
	}
	.son1 {
		float: left;
	}
	.son2 {
		float: right;
	}
</style>
<body>
	<div class="father">
		<div class="son1">标题</div>
		<div class="son2">更多</div>
	</div>
</body>

可以看到这是我没有清除浮动的效果
在这里插入图片描述
清除浮动之后：（给定高度或者overflow都可以，方法挺多的）

在这里插入图片描述
我们接下来使用 flex 试试，代码如下，效果同上：

<style>
	.father {
		border: 1px solid black;
		width: 200px;
		/*height: 100px;*/
		padding: 10px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>

<body>
	<div class="father">
		<div class="son1">标题</div>
		<div class="son2">更多</div>
	</div>
</body>