FlexBox

最新推荐文章于 2025-05-27 21:13:42 发布
最新推荐文章于 2025-05-27 21:13:42 发布
阅读量139 收藏
点赞数
分类专栏： Bootstrap4 CSS3 文章标签： css bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WildKingxue/article/details/119960124
版权

弹性盒子是 CSS3 的一种新的布局模式。

一.CSS弹性盒子

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器(Flex container)---能够包含其他元素的html元素【div】

弹性子元素(Flex item)------被包含在弹性容器中的元素。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

1.display--指定 HTML 元素盒子类型。

display 属性的值为 flex 或 inline-flex将其定义为弹性容器

2.flex-direction--指定了弹性容器中子元素的排列方式。

.row：横向从左到右排列（左对齐），默认的排列方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-direction: row;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>横向从左到右</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

 

.row-reverse：反转横向排列（右对齐，从后往前排）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-direction: row-reverse;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>横向从右到左</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

.column：纵向排列。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-direction: column;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>纵向从上到下</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

 

.column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-direction: column-reverse;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>纵向从下到上</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

 

3.justify-content--设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

flex-start：弹性子元素向行头紧挨着摆放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				justify-content: flex-start;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>横轴从行头紧挨着摆放</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

  

flex-end：弹性子元素向行尾紧挨着摆放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				justify-content: flex-end;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>横轴从行尾紧挨着摆放</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

center：弹性项目居中紧挨着摆放。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				justify-content: center;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>横轴居中紧挨着摆放</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

space-between：弹性项目平均分布在该行上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				justify-content: space-between;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>横轴平均分布在该行上</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				justify-content: space-around;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>横轴平均分布在该行上，两边留有一半的间隔空间</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

4.align-items--设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

flex-start：弹性子元素向行头紧挨着摆放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				align-items: flex-start;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>纵轴从上边框紧挨着摆放</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

 

flex-end：弹性子元素向行尾紧挨着摆放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				align-items: flex-end;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>纵轴从下边框紧挨着摆放</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

 

center：弹性项目居中紧挨着摆放。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				align-items: center;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>纵轴从中间紧挨着摆放</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

 

space-between：弹性项目平均分布在该行上。

space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。

5.flex-wrap--设置弹性盒子的子元素超出父容器时是否换行。

nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-wrap: nowrap;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3> 弹性容器为单行</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-wrap: wrap;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3> 弹性容器为多行，从上往下</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

wrap-reverse -反转 wrap 排列。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-wrap: wrap-reverse;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3> 弹性容器为多行，从下往上</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

6.align-content--修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

stretch - 默认。各行将会伸展以占用剩余的空间。

flex-start - 各行向弹性盒容器的起始位置堆叠。

flex-end - 各行向弹性盒容器的结束位置堆叠。

center -各行向弹性盒容器的中间位置堆叠。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				align-items: flex-start;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
				align-self: center;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				align-self: flex-start;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
				align-self: flex-end;
			}
		</style>
	</head>
	<body>
		<h3>纵轴从上边框紧挨着摆放</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

 

space-between -各行在弹性盒容器中平均分布。

space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小

的一半。

7.order--设置弹性盒子的子元素排列顺序。

整数数字：用整数值来定义排列顺序，数值小的排在前面。可以为负值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-direction: row;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
				order: 5;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				order: 2;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
				order: -3;
			}
		</style>
	</head>
	<body>
		<h3>数值小的排在前面，可为负数</h3>
		<div id="div1">
			<div id="d1">
				<b>d1取值为5</b>
			</div>
			<div id="d2">
				<b>d2取值为2</b>
			</div>
			<div id="d3">
				<b>d3取值为-3</b>
			</div>
		</div>
	</body>
</html>

 

8.align-self--在弹性子元素上使用。覆盖容器的 align-items 属性。

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>从顶部换行但紧挨着上一行</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-end;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>最后一行紧挨着底部，行与行之间紧挨</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-wrap: wrap;
				align-content: center;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>从中间开始行与行之间紧挨</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>上下不留有空隙</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性flex</title>
		<style type="text/css">
			#div1{
				width: 600px;
				height: 600px;
				background-color: antiquewhite;
				display: flex;
				flex-wrap: wrap;
				align-content: stretch;
			}
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			#d2{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			#d3{
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<h3>默认值，与flex-wrap: nowrap相同</h3>
		<div id="div1">
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
			<div id="d1">
				<b>d1</b>
			</div>
			<div id="d2">
				<b>d2</b>
			</div>
			<div id="d3">
				<b>d3</b>
			</div>
		</div>
	</body>
</html>

9.flex--设置弹性盒子的子元素如何分配空间。

auto: 计算值为 1 1 auto

initial: 计算值为 0 1 auto

none：计算值为 0 0 auto

二.Bootstrap弹性盒子

Bootstrap4 通过 flex 类来控制页面的布局。

1.d-inline-flex--显示在同一行上的弹性盒子容器

2..flex-row--设置弹性子元素水平显示【默认的】

.flex-row-reverse: 类用于设置右对齐显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Bootstrap4 Flex（弹性）布局</title>
	</head>
	<body>
		<div class="container">
			<div class="flex-row-reverse d-inline-flex" style="width: 600px;height: 600px;background-color: aqua;float: left;">
				<div class="" style="width: 100px;height: 100px;background-color: red;">
					<b>id1</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: green;">
					<b>id2</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: yellow;">
					<b>id3</b>
				</div>
			</div>
			
		</div>
	</body>
</html>

 

.flex-row :类用于设置左对齐显示【默认值】

3.flex-column--设置弹性子元素垂直方向显示。

.flex-column--子元素垂直显示【从上往下】

.flex-column-reverse:翻转子元素【从下往上】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Bootstrap4 Flex（弹性）布局</title>
	</head>
	<body>
		<div class="container">
			<div class="flex-column-reverse d-inline-flex" style="width: 600px;height: 600px;background-color: aqua;float: left;">
				<div class="" style="width: 100px;height: 100px;background-color: red;">
					<b>id1</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: green;">
					<b>id2</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: yellow;">
					<b>id3</b>
				</div>
			</div>
			
		</div>
	</body>
</html>

 

4.justify-content-* --修改内容排版。

start (默认)--从左到右

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Bootstrap4 Flex（弹性）布局</title>
	</head>
	<body>
		<div class="container">
			<div class="d-inline-flex justify-content-start  " style="width: 600px;height: 600px;background-color: aqua;float: left;">
				<div class="" style="width: 100px;height: 100px;background-color: red;">
					<b>id1</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: green;">
					<b>id2</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: yellow;">
					<b>id3</b>
				</div>
			</div>
			
		</div>
	</body>
</html>

 

end--从右到左

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Bootstrap4 Flex（弹性）布局</title>
	</head>
	<body>
		<div class="container">
			<div class="d-inline-flex flex-column justify-content-end" style="width: 600px;height: 600px;background-color: aqua;float: left;">
				<div class="" style="width: 100px;height: 100px;background-color: red;">
					<b>id1</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: green;">
					<b>id2</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: yellow;">
					<b>id3</b>
				</div>
			</div>
			
		</div>
	</body>
</html>

 

center--居中

横排居中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Bootstrap4 Flex（弹性）布局</title>
	</head>
	<body>
		<div class="container">
			<div class="d-inline-flex justify-content-center" style="width: 600px;height: 600px;background-color: aqua;float: left;">
				<div class="" style="width: 100px;height: 100px;background-color: red;">
					<b>id1</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: green;">
					<b>id2</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: yellow;">
					<b>id3</b>
				</div>
			</div>
			
		</div>
	</body>
</html>

纵排居中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Bootstrap4 Flex（弹性）布局</title>
	</head>
	<body>
		<div class="container">
			<div class="d-inline-flex flex-column-reverse justify-content-center" style="width: 600px;height: 600px;background-color: aqua;float: left;">
				<div class="" style="width: 100px;height: 100px;background-color: red;">
					<b>id1</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: green;">
					<b>id2</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: yellow;">
					<b>id3</b>
				</div>
			</div>
			
		</div>
	</body>
</html>

 between

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Bootstrap4 Flex（弹性）布局</title>
	</head>
	<body>
		<div class="container">
			<div class="d-inline-flex flex-column justify-content-between " style="width: 600px;height: 600px;background-color: aqua;float: left;">
				<div class="" style="width: 100px;height: 100px;background-color: red;">
					<b>id1</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: green;">
					<b>id2</b>
				</div>
				<div class="" style="width: 100px;height: 100px;background-color: yellow;">
					<b>id3</b>
				</div>
			</div>
			
		</div>
	</body>
</html>

 

5.flex-fill--设置各个弹性子元素的宽度是一样的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Bootstrap4 Flex（弹性）布局</title>
	</head>
	<body>
		<div class="container">
			<h3>平分宽度，使剩余的宽度平分</h3>
			<div class="d-inline-flex justify-content-start" style="width: 600px;height: 600px;background-color: aqua;float: left;">
				<div class="flex-fill" style="width: 100px;height: 100px;background-color: red;">
					<b>id1</b>
				</div>
				<div class="flex-fill" style="width: 100px;height: 100px;background-color: green;">
					<b>id2</b>
				</div>
				<div class="flex-fill" style="width: 100px;height: 100px;background-color: yellow;">
					<b>id3</b>
				</div>
			</div>
			
		</div>
	</body>
</html>

6..flex-grow-1--设置子元素用剩下的空间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Bootstrap4 Flex（弹性）布局</title>
	</head>
	<body>
		<div class="container">
			<h3>.flex-grow-1---使所在的子元素使用剩余的空间，有多值时则平分</h3>
			<div class="d-inline-flex justify-content-start  " style="width: 600px;height: 600px;background-color: aqua;float: left;">
				<div class="flex-grow-1" style="width: 100px;height: 100px;background-color: red;">
					<b>id1</b>
				</div>
				<div class="flex-grow-2" style="width: 100px;height: 100px;background-color: green;">
					<b>id2</b>
				</div>
				<div class="flex-grow-3" style="width: 100px;height: 100px;background-color: yellow;">
					<b>id3</b>
				</div>
			</div>		
		</div>
	</body>
</html>

7.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高【可以为负值】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Bootstrap4 Flex（弹性）布局</title>
	</head>
	<body>
		<h3>排序数值小为第一个</h3>
		<div class="container">
			<div class="flex-row d-inline-flex" style="width: 600px;height: 600px;background-color: aqua;float: left;">
				<div class="order-2" style="width: 100px;height: 100px;background-color: red;">
					<b>id1</b>
				</div>
				<div class="order-3" style="width: 100px;height: 100px;background-color: green;">
					<b>id2</b>
				</div>
				<div class="order-1" style="width: 100px;height: 100px;background-color: yellow;">
					<b>id3</b>
				</div>
			</div>
			
		</div>
	</body>
</html>

 

8.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important

9.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important

Flexbox
嗯...
08-02 920
Flexbox（弹性盒子布局）是一种用于在网页中进行灵活的布局的CSS模块。它提供了一种简单而强大的方式来对网页元素进行排列、对齐和分布，适应不同屏幕大小和设备的需求。Flexbox 使用一维的布局模型，可以在水平或垂直方向上创建弹性的容器和项目。弹性容器（Flex Container）是父元素，用于包含弹性项目弹性项目（Flex Item）是子元素，放置在弹性容器内align-self 会覆盖 align-items 属性如下，start 会覆盖掉 last baseline。
Flexbox 属性
YJH15888673903的博客
10-14 360
Flexbox 属性
Flexbox 布局
嘿嘿
07-23 1524
概述 在 flexbox 出现之前，布局的主力一直是 float 和 position，虽然他们表现得很是优秀，但是对于一些复杂或灵活的布局它们还是有些能力不及。比如下面这两种要求： 剩余宽度的自动分配 分布对齐（现在已经有了独立的CSS Box Alignment Module） 为了能更好的解决这些问题，新的布局技术 flexbox 应时而生，当然其诞生也并非一帆风顺，而是经历了两次浴火焚身，最终才得以带领布局走向华丽新篇。 和从前的布局不一样，flexbox 的布局由两层结构组成，父元素设置.
Flexbox布局
JOE
06-20 306
Flexbox React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。 flexDirection、alignItems和 justifyContent三个样式属性可以满足大多数布局需求。 flexDirection决定布局主轴，子元素沿主轴水平方向排列（row）,沿竖直方向排列（column），的默认值是colu...
flexbox布局详解
大白兔
06-10 1016
flexbox——一维布局模型，由flex-container和flex-item（flex容器）构成，为flex-item（flex元素）之间提供了强大的空间分布和对齐能力。
Flexbox弹性盒子详解
qq_63447955的博客
10-11 4370
项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。然而，这些方式对于某些特殊布局，如垂直居中布局，却难以达到理想效果。为了解决这一问题，W3C于2009年提出了一种新的布局方案——Flex布局（Flexible Box，简称flexbox）。三个收缩项目，宽度分别为： 200px 、 300px 、 200px ，它们的 flex-shrink 值分别。弹性容器内包含了一个或多个弹性子元素，这些子元素自动成为容器成员，其布局将受到容器属性的控制。
7.3 Flexbox布局的实际应用
Python老吕的博客
09-05 1037
在这个示例中，我们创建了一个基本的响应式导航栏，它在大屏幕上水平显示导航项，并在小屏幕上通过汉堡菜单来控制导航项的显示。此外，我们还添加了一些交互效果，如鼠标悬停和点击时的背景颜色变化，以及点击时的透明度变化，以提供更好的用户体验。在移动端布局中，Flexbox 的灵活性和响应式特性尤为重要，因为屏幕尺寸和方向的多样性要求布局能够自适应不同的显示环境。这种移动端布局设计非常适合用于创建响应式的网页应用，因为它可以自动适应不同尺寸的屏幕，同时保持内容的可访问性和美观性。
CSS Flexbox 与 Grid 布局详解
A15216110998的专栏
12-10 1251
和属性定义网格的列和行轨道（track）大小。/* 示例 *//* 三列，宽度比例为1:2:1 *//* 三行，第一行为50px，第二行为自适应高度，第三行为剩余空间 */属性定义网格布局的区域（area），通过命名项目并用字符串描述网格结构。/* 对应的项目需设置grid-area属性 */.item1 {.item2 {.item3 {.item4 {.item5 {
Flexbox使用
brucehongsen的博客
08-13 147
Flexbox使用 align-items Vs align-contents align-items 作用于单行 align-contents 作用于多行
flexBox
Stephen__Wu的博客
10-21 313
今天学习了阮一峰大哥的flexbox布局的form篇；觉得可以，简单好用，就记录一下； demo的全部代码 dom篇 &amp;lt;form&amp;gt; &amp;lt;input type='email' name=&quot;email&quot;&amp;gt; &amp;lt;button type=&quot;submit&quot;&amp;gt; send &amp;lt;butt
flexbox
03-06
在Web开发领域，Flexbox，全称为“Flexible Box”，是一种用于布局的CSS模块，旨在提供一种更灵活、可扩展的方式来排列和对齐页面元素。它解决了传统CSS布局方式（如浮动和定位）在处理复杂多变的网页布局时所遇到的...
用 Deepseek 写的 html+js 密码生成器
weixin_42581036的博客
05-22 752
这是一个功能全面的密码生成器，使用HTML和JavaScript实现。用户可以通过滑块设置密码长度（4到64位），并选择包含的字符类型，如小写字母、大写字母、数字和符号。此外，用户还可以选择避免密码中出现重复字符。生成的密码会显示在输入框中，并附带一个密码强度指示条，根据密码长度和使用的字符类型显示强度。用户还可以一键复制生成的密码到剪贴板。该工具具有响应式设计，适配不同屏幕尺寸，适合需要生成安全密码的用户使用。
CSS闯关指南：从手写地狱到“类”积木之旅｜得物技术
SmartCodeTech的博客
05-26 641
CSS开发经历了从纯手写时代到现代原子化框架的演进历程。早期手写CSS存在代码冗余、命名冲突、维护困难等问题；Sass/Less等预处理器通过变量和嵌套提升了代码复用率；CSS Modules和BEM规范解决了作用域污染；CSS-in-JS实现了样式与组件绑定。而原子化CSS（如Tailwind、UnoCSS）通过预设实用类组合样式，大幅提升开发效率和设计一致性，但也面临学习曲线和可读性挑战。技术选型应结合实际需求，平衡灵活性、维护性和开发体验，在代码严谨性和开发效率间寻找最优解。
Vue+css实现扫描动画效果（使用@keyframes scan）
蓝胖子的博客
05-23 362
Vue+css实现扫描动画效果（使用@keyframes scan）annimation
div或button一些好看实用的 CSS 样式示例
最新发布
qq_19891197的博客
05-27 76
2：磨砂玻璃效果（适合现代UI）
13. CSS定位与伪类/伪元素
bighead的博客
05-27 795
定位选择微调位置用relative固定导航用fixed子元素相对于父元素定位用absolute+relative组合伪类与伪元素伪类用于元素状态变化(如:hover)伪元素用于元素特定部分样式(如::first-letter)显示控制需要保留空间时用visibility不需要保留空间时用display。
东方仙盟_灵颜妙手——表单样式——仙盟创梦IDE
cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件
05-26 377
让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与开源项目的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量。
Flexbox布局实例教程与文档解析
Flexbox布局模型是CSS3中引入的一种新的布局模式，它主要针对容器内的子元素进行灵活的空间分配和对齐，使得子元素能够更好地适应不同的屏幕尺寸和设备。Flexbox的出现解决了多年来CSS布局的一些痛点，如垂直居中、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值