flex-basis主轴基准线-526互联

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
			}

			.outer {
				width: calc(100vw - 200px);
				height: calc(100vh - 20px);
				background-color: #eee;
				margin: 10px 100px;

				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: flex-start;
			}

			.inner {
				width: 100px;
				height: 100px;
				background-color: aquamarine;
				border: 1px solid rebeccapurple;
				border-radius: 4px;
				box-sizing: border-box;
				flex: none;
			}

			.inner2 {
				// flex-basis.浏览器拿着这个属性去衡量有没有剩余空间
				// 设置伸缩项目在主轴方向上的基准长度.
				// 若主轴横向,顶掉该伸缩项目原来的宽度,
				// 若主轴纵向,顶掉伸缩项目原来的高度.
				// 不写这个属性, 等价于写的 auto  ,
				// 表示:  主轴若横向,则 flex-basis等于伸缩项width值
				// 主轴若纵向, 则flex-basis等于伸缩项的height值
				/* flex-basis: 300px;  // 把原来的宽度100px给覆盖了 */
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner">1</div>
			<div class="inner inner2">2</div>
			<div class="inner">3</div>
		</div>
	</body>
</html>