论flex布局(讲解属性+实例)

最新推荐文章于 2024-01-18 20:08:16 发布

尖兵果子

最新推荐文章于 2024-01-18 20:08:16 发布

阅读量1k

点赞数

分类专栏： JS 文章标签： css3 css html 前端 html5

本文链接：https://blog.csdn.net/wfy17030212/article/details/122195691

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

传统的盒子模型布局，要使用display+position+float等属性相结合，十分的复杂。就比如要实现一个垂直水平都居中的局部，就很麻烦
因此引入了弹性布局的概念

在这里插入图片描述

在解释flex常用的布局属性之前，首先应该要先搞明白，在我们写了display：flex后意味着什么.
采用flex的元素简称为容器，而在这个容器内的元素被称为项目
在flex布局中，有着两条特殊的线，分别叫做主轴和副轴.默认的主轴就是x轴，也就是水平方向上的，而另一条自然就叫做副轴，也就是y轴

在这里插入图片描述
下面的解释都以这张图为例

常用的flex布局属性

容器属性

flex-direction

这个属性是用于指定在该容器中的项目的主轴是什么样的,根据主轴的开始位置和结束位置排好
flex-direction:row

flex-wrap

这个属性是用于指定在该容器中的项目如果超过了该主轴的总长度，是否需要换行
它的格式为flex-wrap:wrap

flex-flow

这是上面两个属性的简写形式，会它就可以不需要一下子写两个属性了,它的格式为flex-flow:row wrap

justify-content

这就是重头戏了，他能直接设置项目的对齐方式，可以居中对齐，可以分散对齐，可以靠左或靠右对齐。其实还挺像word中的设置文本对齐方式的
它的格式为justify-content:center

align-item

这是设置一根副轴上的项目对齐方式，如果你主轴为x轴，那么副轴就是y轴，反之亦然。它根据副轴的开始位置和结束位置排好
它的格式为align-item:center
但是要注意这个属性只对一根副轴线起效

align-content

这是设置多根轴线上的项目对齐方式
它的格式为align-item:center

项目属性

flex-grow

它定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
就是如果一个容器大小为300，那么你在一个项目里写flex-grow:1，在另一个项目里写flex-grow:1,它们的宽度就是150，如果前一个写2,后一个写1,拿前一个宽度为200,后一个为100.
如果一个项目设置了flex-grow:1，而另一个也在该容器中的项目没有设置。那么前一个会把除那个项目以外的剩余空间全部占满

flex-shrink

它定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
同flex-grow，用其一即可

flex-basis

flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
有了它，就可以不在弹性布局的元素中使用width了，它的作用差不多就是width的作用,给项目指定宽度

flex

是上面三个属性的简写.它的格式为flex:1 1 100%
一般来说，写flex:1就可以实现让一个项目按比例分配大小了

下面给两个flex布局的经典实例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
		<style type="text/css">		
			.playBox{
				display: flex;
				flex-flow: row wrap;				
				align-content: space-between;
				width: 150px;
				height: 150px;
				background-color: whitesmoke;
			}
			
			.playBox .column{
				flex: 1 1 100%;
				display: flex;
				justify-content: space-between;
			}
			
			.playBox .column .dot{
				width: 25px;
				height: 25px;
				background-color: #000000;
				border-radius: 75px;
			}
			
			.playBoxtwo{
				display: flex;
				flex-flow: row wrap;
				align-content: space-between;
				width: 150px;
				height: 150px;
				background-color: whitesmoke;
			}
			
			.playBoxtwo .column{
				flex:1 0 100%;
				display: flex;
				flex-flow: row wrap;
				justify-content: space-between;
			}
			
			.playBoxtwo .column .dot{
				width: 25px;
				height: 25px;
				background-color: #000000;
				border-radius: 75px;
			}
		</style>
	</head>
	<body>
		<div class="playBox">
			<div class="column">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="column">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
		
		<br>
		
		<div class="playBoxtwo">
			<div class="column">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="column">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="column">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
圣杯布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
	
			.box{
				display: flex;
				flex-flow: column wrap;
				height:500px;
			}
			.header{
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background-color: #B4BCCC;				
			}
			.header>span{
				font-size: 25px;
				color: white;
			}
			.content{				
				flex: 6;
				display: flex;
				flex-direction: row;
				height: 500px;				
			}
			.content .left{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #0077AA;
			}
			.content .center{
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ECECEC;
			}
			.content .right{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: coral;
			}
			.footer{
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background-color: #B4BCCC;	
			}
			.footer>span{
				font-size: 25px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="header">
				<span>#header</span>
			</div>
			<div class="content">
				<div class="left">
					<span>#left</span>
				</div>
				<div class="center">
					<span>#center</span>
				</div>
				<div class="right">
					<span>#right</span>
				</div>
			</div>
			<div class="footer">
				<span>#footer</span>
			</div>
		</div>
	</body>
</html>

flex布局其实并不难，但是它偏偏是几行代码就能实现我们想要的效果，所以flex布局必然是未来布局的首选方案

如有不足，还望指正

尖兵果子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
论flex布局(讲解属性+实例)

传统的盒子模型布局，要使用display+position+float等属性相结合，十分的复杂。就比如要实现一个垂直水平都居中的局部，就很麻烦因此引入了弹性布局的概念在解释flex常用的布局属性之前，首先应该要先搞明白，在我们写了display：flex后意味着什么.采用flex的元素简称为容器，而在这个容器内的元素被称为项目在flex布局中，有着两条特殊的线，分别叫做主轴和副轴.默认的主轴就是x轴，也就是水平方向上的，而另一条自然就叫做副轴，也就是y轴下面的解释都以这张图为例常用的flex
复制链接

扫一扫