html - Simple Flexbox模型中的错误

我想在flexbox模型中对齐框。
这是我使用的代码：

<style>

		*{
			margin: 0;
		}

		.wrapper{
			width: 100%;
			max-width: 960px;
			margin: 0 auto;
		}

		.container{
			display: flex;
		}

		.box{
			height: 100px;
			min-width: 100px;
			margin: 20px;
		}

		.one{
			background: purple;
		}

		.two{
			background: yellow;
		}

		.three{
			background: orange;
		}

<body>


	<div class="wrapper">
		<div class="container">
			<div class="box one">I'm Faded</div>
			<div class="box two">I'm Faded</div>
			<div class="box three">I'm Faded</div>
		</div>
	</div>
</body>

如果单击整页，则会看到类似以下内容的内容：

我不知道为什么紫色框前面有空白，该如何解决？
请提出建议。

最佳答案

<style>

		*{
			margin: 0;
		}

		.wrapper{
			width: 100%;
			max-width: 960px;
			margin: 0 auto;
		}

		.container{
			display: flex;
		}

		.box{
			height: 100px;
			min-width: 100px;
			/* margin: 20px; 8?
		}

		.one{
			background: purple;
		}

		.two{
			background: yellow;
		}

		.three{
			background: orange;
		}

<body>


	<div class="wrapper">
		<div class="container">
			<div class="box one">I'm Faded</div>
			<div class="box two">I'm Faded</div>
			<div class="box three">I'm Faded</div>
		</div>
	</div>
</body>

您要在框类中添加边距，如果您将其删除，则会在彩色框的每侧（包括正面）的前面删除多余的空间

关于html - Simple Flexbox模型中的错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45397234/