移动端第十六章弹性盒子布局

最新推荐文章于 2024-09-14 13:04:57 发布

LW0512

最新推荐文章于 2024-09-14 13:04:57 发布

阅读量216

点赞数

分类专栏：移动端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108929042

版权

移动端专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了移动端的弹性盒子布局，包括布局的概念、容器属性（如flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content）以及项目的属性（如order、flex）。通过实例展示了各种属性的效果，帮助理解如何在主轴和交叉轴上控制元素的排列和对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹性盒子布局

1：什么是弹性盒子布局？

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。
目前，它已经得到了所有浏览器的支持。
ie10以上浏览器支持
Flex是Flexible Box的缩写，意为‘弹性布局’，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

举例：

.box{
	display: flex;
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2：弹性盒子的基本概念：

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴和垂直的交叉轴。
项目默认沿主轴排列

3：容器属性（父元素属性）：

排列方向：

flex-direction：属性决定主轴的方向（即项目的排列方向）
	——row（默认值）：主轴为水平方向，起点在左端。
	——row-reverse：主轴为水平方向，起点在右端。
	——column：主轴为垂直方向，起点在上沿。
	——column-reverse：主轴为垂直方向，起点在下沿

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				/*把div变成弹性盒子 加一句咒语  display:flex*/
				display:flex;
				/*排列属性*/
				/*flex-direction: row;*/
				/*flex-direction: row-reverse;*/
				/*flex-direction: column;*/
				/*flex-direction: column-reverse;*/
				width: 600px;
				height: 300px;
				background: red;
				margin:  0 auto;
			}
			span{
				width: 100px;
				height: 100px;
				background: blue;
				border: 1px solid yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
	</body>
</html>

折行：

flex-wrap：默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
——nowrap（默认）：不换行
——wrap：换行，第一行在上方。
——wrap-reverse：换行，第一行在下方。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				/*把div变成弹性盒子 加一句咒语  display:flex*/
				display:flex;
				/*折行*/
				/*flex-wrap: nowrap;*/
				/*flex-wrap: wrap;*/
				flex-wrap: wrap-reverse;
				width: 600px;
				height: 300px;
				background: red;
				margin:  0 auto;
			}
			span{
				width: 200px;
				height: 100px;
				background: blue;
				border: 1px solid yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
	</body>
</html>

排列折行复合写法
flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				/*把div变成弹性盒子 加一句咒语  display:flex*/
				display:flex;
				/*排列折行复合写法*/
				/*flex-flow: row nowrap;*/
				/*flex-flow: row wrap;*/
				/*flex-flow: column wrap;*/
				flex-flow: column wrap-reverse;
				width: 600px;
				height: 300px;
				background: red;
				margin:  0 auto;
			}
			span{
				width: 200px;
				height: 100px;
				background: blue;
				border: 1px solid yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			
		</div>
	</body>
</html>

x对起方式
justify-content：属性定义了项目在主轴上的对齐方式。
——flex-start（默认值）：左对齐
——flex-end：右对齐
——center：居中
——space-between：两端对齐，项目之间的间隔都相等。
——space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				/*把父元素 变成弹性盒子*/
				display: flex;
				/*x对起方式*/
				/*justify-content:space-around ;*/
				/*justify-content: space-between;*/
				/*justify-content: flex-start;*/
				/*justify-content:center;*/
				justify-content:flex-end;
				
				width:600px;
				height: 400px;
				background: red;
				margin: 0 auto;
			}
			span{
				width: 100px;
				height: 100px;
				background: pink;
				border: 1px solid yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
	</body>
</html>

y单行对起方式

align-items：属性定义项目在交叉轴上如何对齐(设置单行元素，多行元素没有作用)。。
——flex-start：交叉轴的起点对齐。
——flex-end：交叉轴的终点对齐。
——center：交叉轴的中点对齐。
——baseline: 项目的第一行文字的基线对齐。
——stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				/*把父元素 变成弹性盒子*/
				display: flex;
				/*y单行对起方式*/
				/*align-items: flex-start;*/
				/*align-items: baseline;*/
				/*align-items: flex-end;*/
				/*align-items: center;*/
				/*align-items:stretch;*/
				/*混合写法*/
				/*justify-content: center;
				align-items: center;
				flex-direction: row-reverse;*/
				flex-direction: column;
				/*align-items: flex-start;*/
				/*align-items: flex-end;*/
				/*align-items: center;*/
				width:600px;
				height: 500px;
				background: red;
				margin: 0 auto;
			}
			span{
				width: 100px;
				height: 100px;
				background: pink;
				border: 1px solid yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
	</body>
</html>

y多行对起方式

align-content：属性定义了多根轴线的对齐方式(设置多行元素，单行元素没有作用)。
——flex-start：与交叉轴的起点对齐。
——flex-end：与交叉轴的终点对齐。
——center：与交叉轴的中点对齐。
——space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
——space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
——stretch（默认值）：轴线占满整个交叉轴。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				/*把父元素 变成弹性盒子*/
				display: flex;
				/*折行*/
				flex-wrap:wrap ;
				/*多行对起方式*/
				/*align-content: flex-start;*/
				/*align-content: flex-end;*/
				/*align-content: center;*/
				/*align-content: space-around;*/
				/*align-content: space-between;*/
				/*align-content:stretch;*/
				/*排列方式*/
				/*flex-direction:column ;*/
				/*align-content: center;*/
				/*align-content: space-between;*/
				/*align-content: space-around;*/
				/*单行*/
				/*align-items: flex-end;*/
				/*align-items: center;*/
				width:600px;
				height: 500px;
				background: red;
				margin: 0 auto;
			}
			span{
				width: 200px;
				height: 100px;
				background: pink;
				border: 1px solid yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
		</div>
	</body>
</html>

4：项目的属性（子元素属性）

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				/*把父元素 变成弹性盒子*/
				display: flex;
				width:600px;
				height: 500px;
				background: red;
				margin: 0 auto;
			}
			span{
				/*width: 100px;*/
				/*flex: 1;*/
				height: 100px;
				background: pink;
				border: 1px solid yellow;
			}
			span:nth-child(1){
				flex: 1;
				/*order: 1;*/
			}
			span:nth-child(2){
				flex: 2;
				/*order:3;*/
				order:-10;
			}
			span:nth-child(3){
				flex: 3;
				/*order:2;*/
				order:-99;
			}
			span:nth-child(4){
				flex: 4;
				/*order:40;*/
				order:-1;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
	</body>
</html>

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，控制子元素的大小。

实例：

	<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				/*把div盒子变成 弹性盒子*/
				display: flex;
				/*justify-content: space-between;*/
				width: 900px;
				height: 400px;
				background: red;
				margin: 0 auto;
			}
			span{
				/*display:block;*/
				width:100px;
				height: 100px;
				background: blue;
				/*margin: 0 50px;*/
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
	</body>
</html>

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
	flex-end 
	baseline 
	center 
	stretch 
	flex-start

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				/*把div变成弹性盒子 加一句咒语  display:flex*/
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				width: 600px;
				height: 300px;
				background: red;
				margin:  0 auto;
			}
			span{
				/*float: left;*/
				/*display: block;*/
				width: 100px;
				height: 100px;
				background: blue;
				border: 1px solid yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
</html>