弹性布局：CSS与HTML flexbox实践-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_70552412/article/details/126130004

	.wk {
				width: 600px;
				height: 400px;
				margin: 0 auto;
			    border: 1px solid;
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
				justify-content: space-around;
				align-content: space-around;
			}

			.nr-1 {
				width: 160px;
				height: 120px;
				background-color: black;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
				justify-content: space-around;
				align-content: space-around;
			}

			.nr-2 {
				width: 60px;
				height: 60px;
				border-radius: 10px;
				box-shadow: 0 0 0 0.6em #d7d7d7;
				background-color: #e7e7e7;
				
				display: flex;
			}

			.yuan {
				width: 20px;
				height: 20px;
				display: block;
				background-color: black;
				border-radius: 50%;
			}

			.nr-1:nth-of-type(2) .nr-2 {
				justify-content: center;
			}

			.nr-1:nth-of-type(3) .nr-2 {
				justify-content: flex-end;
			}

			.nr-1:nth-of-type(4) .nr-2 {
				display: flex;
				align-items: center;
			}

			.nr-1:nth-of-type(5) .nr-2 {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.nr-1:nth-of-type(6) .nr-2 {
				justify-content: flex-end;
				align-items: flex-end;
			}
		</style>
	</head>
	<body>
		<div class="wk">
			<div class="nr-1">
				<div class="nr-2">
					<span class="yuan"></span>
				</div>
			</div>
			<div class="nr-1">
				<div class="nr-2">
					<span class="yuan"></span>
				</div>
			</div>
			<div class="nr-1">
				<div class="nr-2">
					<span class="yuan"></span>
				</div>
			</div>
			<div class="nr-1">
				<div class="nr-2">
					<span class="yuan"></span>
				</div>
			</div>
			<div class="nr-1">
				<div class="nr-2">
					<span class="yuan"></span>
			 </div>
			</div>
			<div class="nr-1">
				<div class="nr-2">
					<span class="yuan"></span>
				</div>
			</div>
		</div>

弹性元素的属性
1、order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2、flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
3、flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
4、flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，
即项目的本来大小。
5、flexflex：属性是flex-grow, flex-shrink 和 flex-basis的简写，
默认值为0 1 auto。后两个属性可选。
6、align-self：允许单个项目有与其他项目不一样的对齐方式，
可覆盖align-items属性。默认值为auto，
表示继承父元素的align-items属性，如果没有父元素，
则等同于stretch。

弹性盒子-骰子练习