flex布局总结

最新推荐文章于 2024-06-11 08:38:44 发布

鲨鱼～白兔℡

最新推荐文章于 2024-06-11 08:38:44 发布

阅读量238

点赞数

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/qq_74974725/article/details/133912334

版权

1.简述：

（1）什么是flex布局

flex布局是页面布局的一种形式，为布局而生，非常灵活，是目前最常用的布局写法

（2）适用范围

任何一个容器都可以指定为flex布局
父元素使用flex布局后，子元素的float、clear、vertical-align都将失效

2.定义弹性盒模型

<style type="text/css">
		.item{
			text-align: center;
			line-height: 100px;
		}
		.one,.two{
			background-color:red;
			width:200px;
			height: 100px;
			margin: 30px;
		}
	</style>
	<body>
		<div class="item">
			<div class="one">1</div>
			<div class="two">2</div>
		</div>

只要给父元素设置display:flex，即可让两个盒子在一行显示

		.item{
			display: flex;
			text-align: center;
			line-height: 100px;
		}

3.弹性盒模型中的容器属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items：定义项目在Y轴上的对齐方式
align-content：定义多行主轴对齐方式（如果只有一行主轴，该属性不起作用）

（1）flex-direction：设置容器内元素的排列方向

row:弹性盒按x轴方向排列（默认值）
row-reverse：按x轴方向逆序排列
column：弹性盒按y轴方向排列
column-reverse：按y轴方向逆序排列

（2）flex-wrap：设置弹性盒换行方式

当设置 flex-wrap：wrap 时，可通过缩小、扩展浏览器页面查看换行状态。

如果一行承载不下则自动换行，当浏览器足够承载盒子宽度时换行则无效

nowrap:不换行（默认值）会压缩宽度
wrap：换行
wrap-reverse：换行，反转排列

（3）flex-flow：是flex-direction和flex-wrap的简写，默认为"flex-flow:row nowrap"

（4） justify-content：项目在X轴方向上的对齐方式

flex-start：左对齐（默认值）
flex-end：右对齐
center：居中对齐
space-between：两端对齐，每个盒子间隔相等，靠着容器壁，平分剩余空间
space-around：每个盒子两侧间隔相等，因此两个盒子间的距离是盒子与左右项目边框距离的二倍，不靠容器壁

总结： space-between 与 space-around 都可以实现盒子等距布满屏幕（等距分布）；

space-between 是单纯等距分布、平分剩余空间的概念；

space-around 在此基础上...存在两个盒子的间距以及跟边框距离的倍数关系；

（5） align-items：项目在y轴方向上的对齐方式

注意！！定义项目在垂直（y轴）方向上的对齐方式，首先要确保其父级元素有height值【父级元素有高度】

flex-star：上对齐
flex-end：下对齐
center：垂直居中对齐
baseline：项目的第一行文字的基线对齐
stretch：如果项目未设置高度或高度为auto，将占满整个容器的高度

flex-star 效果图

baseline 效果图

（6） align-content：定义多行主轴的对齐方式，如果项目只有一行主轴，则该属性不起作用；与 justify-content 有着相同属性，但多行主轴会涉及垂直的距离——与align-items类似（更像是二者的结合版）

flex-start：每一行左、顶对齐（默认值）
flex-end：每一行左、底对齐
center：垂直居中对齐
space-between：上下两端对齐，紧挨上下容器壁，平分剩余垂直空间
space-around：每个盒子上下间隔相等，因此上下两个盒子间的距离是与上下容器壁距离的二倍，不紧靠上下容器壁
stretch：轴线占满整个高度（子项目未定义高度、父级有准确高度时，子元素则自动伸展填满父级高度）

附上代码，可修改属性自己测试效果 ......

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex弹性盒布局</title>
	</head>
	<style type="text/css">
		body{
			background-color:#f5f5f5;
		}
		/* .yyy{
			width:100%;
			height:700px;
			background-color:gray;
			
		} */
		.item{
			width:100%;
			/* height:500px; */
			background-color:grey;
			display: flex;
			flex-direction:row;
			flex-wrap: wrap;
			font-size: 20px;
			align-content:flex-end;
			
		}
		.one,.two{
			background-color:bisque;
			width:200px;
			/* height:100px; */
 			/* margin:0 30px 0 0; */
			
		}
		.two{
			background-color:gold
		}
	</style>
	<body>
		<div class="yyy">
			<div class="item">
				<div class="one">1</div>
				<div class="two">2</div>
				<div class="one">3</div>
				<div class="two">4</div>
				<div class="one">5</div>
				<div class="two">6</div>
				<div class="one">7</div>
			</div>
		</div>
	</body>
</html>

4.弹性盒模型中子元素的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

（1）order：定义项目的排列顺序；

1.1 数值越小，排列越靠前；

1.2 可以为负数，默认值为0；


		.one{
			order:1;
		}
		.two{
			order: 2;
		}
		.three{
			order: -1;
		}
		.four{
			
			
		}
		.five{

		}

（2）flex-grow：当父级元素存在剩余空间的时候，定义项目在父级元素中的放大倍数

放大倍数默认为0，即使存在剩余空间，也不放大；
如果项目 flex-grow 的值都为1，则等分剩余空间；
如果一个项目的 flex-grow 值为2，其他项目的 flex-grow 都为1，则前者占据的剩余空间是后者的二倍；

.one{
			flex-grow:1;
		}
		.two{
			flex-grow:1;
		}
		.three{
			flex-grow:1;
		}
		.four{
			flex-grow:1;
			
		}
		.five{
			flex-grow:1;
		}

		.one{
			background-color: #fff;
			flex-grow:0;
		}
		.two{
			background-color: aquamarine;
			flex-grow:1;
		}
		.three{
			background-color: #fff;
			flex-grow:2;
		}
		.four{
			background-color: aquamarine;
			flex-grow:3;
			
		}
		.five{
			background-color: #fff;
			flex-grow:4;
		}

（3）flex-shrink 当所有项目的默认宽度之和大于容器时，定义项目的缩小比例

number值不能为负；
默认值为1，如果空间不足，项目则缩小；
如果项目的 flex-shrink 值都为1，空间不足时它们都将等比例缩小；
如果一个项目的 flex-shrink 为0，其他项目的 flex-shrink 都为1，则当空间不足时前者不缩小，后者等比例缩小；

		.one{
			background-color: #fff;
			flex-shrink: 0;
		}
		.two{
			background-color: aquamarine;
			flex-shrink: 1;
		}
		.three{
			background-color: #fff;
			flex-shrink: 1;
		}
		.four{
			background-color: aquamarine;
			flex-shrink: 1;
			
		}
		.five{
			background-color: #fff;
			flex-shrink: 1;
		}

一个项目的 flex-shrink 为0，其他都为1，前者不缩小，后者等比例缩小

（4）flex是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto

（5）align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式，有六个可设定的值。默认值为auto （和父元素align-self的值一致）

用法与 align-content 一致

flex-start：每一行左、顶对齐（默认值）
flex-end：每一行左、底对齐
center：垂直居中对齐
space-between：上下两端对齐，紧挨上下容器壁，平分剩余垂直空间
space-around：每个盒子上下间隔相等，因此上下两个盒子间的距离是与上下容器壁距离的二倍，不紧靠上下容器壁
stretch：轴线占满整个高度（子项目未定义高度、父级有准确高度时，子元素则自动伸展填满父级高度）

鲨鱼～白兔℡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
flex布局总结

flex布局是页面布局的一种形式，为布局而生，非常灵活，是目前最常用的布局写法.item{.one,.two{</style><body></div>只要给父元素设置display:flex，即可让两个盒子在一行显示.item{x轴两个盒子间的距离是与上下容器壁距离的二倍，不紧靠上下容器壁flex-start 效果图flex-end 效果图center 效果图space-between 效果图space-around 效果图stretch 效果图。
复制链接

扫一扫