CSS

最新推荐文章于 2024-11-04 07:45:03 发布

weixin_56706590

最新推荐文章于 2024-11-04 07:45:03 发布

阅读量54

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_56706590/article/details/120597321

版权

本文详细介绍了Flex布局的各个属性，包括老版本和新版本的差异，如容器的布局方向、富裕空间的管理、项目的弹性空间管理等。通过实例展示了如何实现等分布局和自定义伸缩比例，以及如何利用Flex构建淘宝顶部导航栏。同时，文章还涵盖了新版本中新增的特性，如多行处理、项目排列顺序的控制等。

摘要由CSDN通过智能技术生成

一、flex

1.老版本

容器
容器的布局方向
-webkit-box-orient:horizontal/vertical
控制主轴是哪一根
horizontal：x轴
vertical ：y轴
容器的排列方向
-webkit-box-direction：normal/reverse
控制主轴的方向
normal：从左往右（正方向）
reverse：从右往左（反方向）
富裕空间的管理
只决定富裕空间的位置，不会给项目区分配空间
主轴
-webkit-box-pack
主轴是x轴
start：在右边
end: 在左边
center：在两边
justify：在项目之间
主轴是y轴
start：在下边
end：在上边
center：在两边
justify：在项目之间
侧轴
-webkit-box-algin
侧轴是x轴
start：在右边
end：在左边
center：在两边
侧轴是y轴
start：在下边
end：在上边
center：在两边
项目
弹性空间管理
-webkit-box-flex：弹性因子（默认值为0）

2.新版本

容器
容器的布局方向
容器的排列方向
flex-direction
控制主轴是哪一根，控制主轴的方向
row; 从左往右的x轴
row-reverse;从右往左的x轴
column; 从上往下的y轴
column-reverse;从下往上的y轴
富裕空间的管理
只决定富裕空间的位置，不会给项目区分配空间
主轴
justify-content
flex-start：在主轴的正方向
flex-end: 在主轴的反方向
center：在两边
space-between：在项目之间
space-around：在项目两边
```
  		侧轴
  			align-items
  					flex-start：在侧轴的正方向
  					flex-end：    在侧轴的反方向
  					center：		在两边
  					base#ne    基线对齐
   					stretch		等高布局（项目没有高度）	
```
项目
弹性空间管理
flex-grow：弹性因子（默认值为0）

3.新版本新增的

容器
flex-wrap：控制的是侧轴的方向
nowrap 不换行
wrap 侧轴方向由上而下（flex-shrink失效）
wrap-reverse 侧轴方向由下而上（flex-shrink失效）

  	align-content：多行/列时侧轴富裕空间的管理（把多行/列看成一个整体）
  	
  	flex-flow：flex-direction和flex-wrap的简写属性
  		本质上控制了主轴和侧轴分别是哪一根，以及他们的方向

项目
order:控制项目的排列顺序
align-self：项目自身富裕空间的管理
flex-shrink：收缩因子（默认值为1）
flex-basis：伸缩规则计算的基准值（默认拿width或height的值）

4.伸缩规则

flex-basis（默认值为auto）
flex-grow（默认值为0）
可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
每项伸缩大小 = (伸缩基准值flex-basis + (可扩展空间 x flex-grow值))
flex-shrink（默认值为1）
–.计算收缩因子与基准值乘的总和
var a = 每一项flex-shrinkflex-basis之和
–.计算收缩因数
收缩因数=（项目的收缩因子项目基准值）/第一步计算总和
var b = (flex-shrink*flex-basis)/a
–.移除空间的计算
移除空间= 项目收缩因数 x 负溢出的空间
var c = b * 溢出的空间

5.侧轴富裕空间的管理

单行单列
align-items
多行多列
align-content

6.flex的简写属性

flex:1 (flex-basis:0% flex-grow:1 flex-shrink:1)

（1）等分布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 100px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				
				display: flex;
			}
			#wrap > .item{
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
				
				flex-shrink: 1;
				flex-grow: 1;
				flex-basis: 0;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>

（2）flex简写属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display: flex;
			}
			#wrap > .item{
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
				flex: 300;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="item">11</div>
			<div class="item">222</div>
			<div class="item">3333</div>
			<div class="item">44444</div>
			<div class="item">555555</div>
		</div>
	</body>
</html>

示例：做个淘宝

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				color: gray;
				display: block;
			}
			#nav > .row{
				display: flex;
			}
			#nav > .row > .item{
				flex: 1;
				text-align: center;
			}
			
			#nav > .row > .item > a:before{
				content: "";
				display: block;
				width: 86px;
				height: 86px;
				margin: 0 auto;
			}
			
			#nav > .row:nth-child(1) > .item:nth-child(1) >a:before{
				background: url(img/01.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(2) >a:before{
				background: url(img/02.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(3) >a:before{
				background: url(img/03.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(4) >a:before{
				background: url(img/04.png) no-repeat;
			}
			#nav > .row:nth-child(1) > .item:nth-child(5) >a:before{
				background: url(img/05.png) no-repeat;
			}
			
			
			#nav > .row:nth-child(2) > .item:nth-child(1) >a:before{
				background: url(img/06.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(2) >a:before{
				background: url(img/07.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(3) >a:before{
				background: url(img/08.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(4) >a:before{
				background: url(img/09.png) no-repeat;
			}
			#nav > .row:nth-child(2) > .item:nth-child(5) >a:before{
				background: url(img/10.png) no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<div class="row">
				<div class="item">
					<a href="javascript:;">天猫</a>
				</div>
				<div class="item">
					<a href="javascript:;">聚划算</a>
				</div>
				<div class="item">
					<a href="javascript:;">天猫国际</a>
				</div>
				<div class="item">
					<a href="javascript:;">外卖</a>
				</div>
				<div class="item">
					<a href="javascript:;">天猫超市</a>
				</div>
			</div>
			<div class="row">
				<div class="item">
					<a href="javascript:;">充值中心</a>
				</div>
				<div class="item">
					<a href="javascript:;">欣欣旅行</a>
				</div>
				<div class="item">
					<a href="javascript:;">领金币</a>
				</div>
				<div class="item">
					<a href="javascript:;">拍卖</a>
				</div>
				<div class="item">
					<a href="javascript:;">分类</a>
				</div>
			</div>
		</div>
	</body>
</html>