弹性盒子详解（二）

最新推荐文章于 2024-03-19 10:15:37 发布

月疯

最新推荐文章于 2024-03-19 10:15:37 发布

阅读量286

点赞数

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119179437

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

5、flex-wrap

说明：

该属性控制flex容器是单行或者多行，同时横轴的方向决定了新堆叠的方向。

Nowrap：flex容器为单行。该情况下flex子项可能会溢出容器

Wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行

Wrap-reverse：反转wrap排列

wrap：

Wrap-reverse：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section{
				width: 500px;
				height: 375px;
				background: #eee;
				display: flex;
				margin: auto;
				flex-direction: row;
				flex-wrap: wrap-reverse;
			}
			span{
				width: 100px;
				height: 100px;
				background: olive;
				border-radius: 50%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<section>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
			<span>7</span>
			<span>8</span>
		</section>
	</body>
</html>

6、align-content（行与行之间对齐方式）

说明

当伸缩容器的侧轴还有多余空间时，本属性可以用来调准【伸缩行】在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的<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">
			section{
				width: 500px;
				height: 375px;
				background: #eee;
				display: flex;
				margin: auto;
				flex-direction: row;
				flex-wrap: wrap;
				align-content: space-around;
			}
			span{
				width: 100px;
				height: 100px;
				background: olive;
				border-radius: 50%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<section>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>
			<span>7</span>
			<span>8</span>
			<span>9</span>
			<span>10</span>
			<span>11</span>
			<span>12</span>
		</section>
	</body>
</html>

7、align-self

说明：

Align-self属性规定灵活容器内被选中项目的对齐方式。

注意：align-self属性可重写灵活容器的align-items属性。

auto 默认值。元素继承了它的父容器的align-items属性。如果没有父容器则为“strech”。
Stretch 元素被拉伸以适应容器
Center 元素位于容器的中心
Flex-start元素位于容器的开头
Flex-end 元素位于容器的结尾

注意：intenet Explorer和Safari浏览器不支持align-self属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section{
				width: 500px;
				height: 375px;
				background: #eee;
				display: flex;
				margin: auto;
				flex-direction: row;
				flex-wrap: wrap;
				align-content: space-around;
			}
			span{
				width: 100px;
				height: 100px;
				text-align: center;
				font-size: 13px;
				font-weight: 900;
				color: #fff;
			}
			span:nth-child(1){
				background: orange;
				
			}
			span:nth-child(2){
				background: red;
				
			}
			span:nth-child(3){
				background: green;
			}
		</style>
	</head>
	<body>
		<section>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			
		</section>
	</body>
</html>

去掉span的height属性：文字撑开的大小

去掉align-content之后：高度变成100%

注意，弹性盒子元素不写heght属性，默认高度是100%

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section{
				width: 500px;
				height: 375px;
				background: #eee;
				display: flex;
				margin: auto;
				flex-direction: row;
				flex-wrap: wrap;
			}
			span{
				width: 100px;
				text-align: center;
				font-size: 13px;
				font-weight: 900;
				color: #fff;
			}
			span:nth-child(1){
				background: orange;
				
			}
			span:nth-child(2){
				background: red;
				
			}
			span:nth-child(3){
				background: green;
				align-self: flex-end;
			}
		</style>
	</head>
	<body>
		<section>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</section>
	</body>
</html>

8、order

说明：排序（控制子元素的先后顺序）数值越大越往后排列，支持负数，默认是0

9、flex

说明：

符合属性。设置火箭所弹性盒模型对象的子元素如何分配空间。

缩写【flex:1】则其计算值为【110%】

缩写【flex:auto】，择期计算值为【11auto】

Flex：none，则其计算值为00auto

Flex：0 auto或者flex：index，则其计算值为01 auto，即flex初始值

设置flex:1，平均分配空间，

给谁设置flex，谁分型剩余空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section{
				width: 500px;
				height: 375px;
				background: #eee;
				display: flex;
				margin: auto;
				flex-direction: row;
				flex-wrap: wrap;
			}
			span{
				width: 100px;
				height: 100px;
				text-align: center;
				font-size: 13px;
				font-weight: 900;
				color: #fff;
				flex: 1;
			}
			span:nth-child(1){
				background: orange;
				
			}
			span:nth-child(2){
				background: red;
				
			}
			span:nth-child(3){
				background: green;
			}
		</style>
	</head>
	<body>
		<section>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</section>
	</body>
</html>