flex布局（弹性布局）

最新推荐文章于 2024-08-26 17:21:03 发布

佛系小菜鸡

最新推荐文章于 2024-08-26 17:21:03 发布

阅读量189

点赞数

分类专栏：前端文章标签： flex

本文链接：https://blog.csdn.net/qq_40224261/article/details/104270181

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

传统布局与flex布局

传统布局（float布局）

兼容性好
布局繁琐
局限性，不能在移动端很好的布局

flex布局

操作方便，布局极为简单，移动端应用很广泛
pc端浏览器支持情况较差
ie11或更低版本，不支持或仅部分支持

建议

如果PC端页面布局，我们还是使用传统布局，也就是float浮动布局
如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

flex布局原理

用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局
采用flex布局的元素，称为flex容器，简称‘容器’，它的所有子元素自动成为容器成员，成为flex项目（flex item），简称项目

注意
1）当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
2）伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

总结
就是通过给父盒子添加flex属性，来控制盒子的位置和排列方式

常见父项属性

flex-direction：设置主轴方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行（在flex布局中，默认情况下，子元素是不换行的，如果装不开，就会缩小子元素的宽度，放到父元素里）
align-content：设置侧轴上的子元素排列方式（多行）
algin-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置flex-direction和flex-wrap

主轴与侧轴
默认的主轴方向就是x轴方向，水平向右
默认侧轴方向是y轴方向，水平向下
在这里插入图片描述

代码案例展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex</title>
		<style type="text/css">
			#box{
				display: flex;
				width: 600px;
				height: 400px;
				background-color: #008000;
				/* 默认值为row，主轴为行 */
				flex-direction: row;
				/* 实现换行 */
				flex-wrap: wrap;
				/*等同于 flex-direction: row; flex-wrap: wrap;*/
				flex-flow: row wrap; 
				/* 主轴上的元素排列方式 */
				justify-content: space-between;
				/* 实现侧轴上的元素排列方式（单行） */
				align-items: stretch;
				/* 实现侧轴上的元素排列方式(多行) */
				align-content: space-around;
			}
			span{
				width: 170px;
				height: 100px;
				background-color: #A38208;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
</html>

align-content和align-items区别

align-items适用于单行情况下，只有flex-start，flex-end，center、stretch属性
align-content适用于换行（多行）的情况下（单行情况下无效），可以设置flex-start，flex-end，center、stretch，space-around和space-between属性
总结就是单行找align-items，多行找align-content

flex布局子项常见属性

flex属性
flex属性定义子项目分配剩余空间，用flex来表示占用多少分数
algin-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认为auto，继承父元素的align-items属性，如果没有，则等同于stretch。
order
定义项目的排列顺序，数值越小，排列越靠前，默认为0

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex子项目属性</title>
		<style type="text/css">
			section,
			p,
			#box {
				display: flex;
				width: 70%;
				height: 150px;
				margin: 10px auto;
				background-color: #9C941F;
			}

			section div:nth-child(1) {
				width: 100px;
				background-color: #0000FF;
			}

			section div:nth-child(2) {
				/* 分配剩余空间，用number表示分数*/
				flex: 1;
				background-color: aqua;
			}

			section div:nth-child(3) {
				width: 100px;
				background-color: red;
			}

			p span {
				flex: 1;

			}

			p span:nth-child(2) {
				flex: 2;
				background-color: #808080;
			}
			
			#box div{
				width: 150px;
				height: 100px;
				background-color: blanchedalmond;
				margin-right: 10px;
			}
			#box{
				height: 300px;
			}
			#box div:nth-child(3){
				/* 给单个子元素设置排列方式 */
				align-self: flex-end;
				/* 设置子项目的排列顺序 */
				order: -1;
			}
		</style>

	</head>

	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>

		<p>
			<span>1</span>
			<span>2</span>

			<span>3</span>
		</p>

		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>
</html>