Html 简单Flexbox模型中的错误

我想在flexbox模型中对齐长方体。 以下是我使用的代码：

*{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：960像素；
保证金：0自动；
}
.集装箱{
显示器：flex；
}
.盒子{
高度：100px；
最小宽度：100px；
利润率：20px；
}
.一{
背景：紫色；
}
.二{
背景：黄色；
}
.三{
背景：橙色；
}

我褪色了
我褪色了
我褪色了

*{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：960像素；
保证金：0自动；
}
.集装箱{
显示器：flex；
}
.盒子{
高度：100px；
最小宽度：100px；
/*利润率：20px；8？
}
.一{
背景：紫色；
}
.二{
背景：黄色；
}
.三{
背景：橙色；
}

我褪色了
我褪色了
我褪色了

*{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：960像素；
保证金：0自动；
}
.集装箱{
显示器：flex；
}
.盒子{
高度：100px；
最小宽度：100px；
/*利润率：20px；8？
}
.一{
背景：紫色；
}
.二{
背景：黄色；
}
.三{
背景：橙色；
}

我褪色了
我褪色了
我褪色了

看看这是否适合您：--

*{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：960像素；
保证金：0自动；
}
.集装箱{
显示器：flex；
证明内容：之间的空间；
}
.盒子{
高度：100px；
最小宽度：100px；
}
.一{
背景：紫色；
}
.二{
背景：黄色；
}
.三{
背景：橙色；
}

我褪色了
我褪色了
我褪色了

看看这是否适合您：--

*{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：960像素；
保证金：0自动；
}
.集装箱{
显示器：flex；
证明内容：之间的空间；
}
.盒子{
高度：100px；
最小宽度：100px；
}
.一{
背景：紫色；
}
.二{
背景：黄色；
}
.三{
背景：橙色；
}

我褪色了
我褪色了
我褪色了

您所说的是什么类型的空白，它就在方框后面，所以更好的方法是删除您在child div中设置的边距

*{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：960像素；
保证金：0自动；
}
.集装箱{
显示器：flex；
调整内容：灵活启动；
}
.盒子{
高度：100px；
最小宽度：100px；
}
.一{
背景：紫色；
}
.二{
背景：黄色；
}
.三{
背景：橙色；
}

我褪色了
我褪色了
我褪色了

您所说的是什么类型的空白，它就在方框后面，所以更好的方法是删除您在child div中设置的边距

*{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：960像素；
保证金：0自动；
}
.集装箱{
显示器：flex；
调整内容：灵活启动；
}
.盒子{
高度：100px；
最小宽度：100px；
}
.一{
背景：紫色；
}
.二{
背景：黄色；
}
.三{
背景：橙色；
}

我褪色了
我褪色了
我褪色了

如果你点击整个页面，你会看到如下内容：（紫色方框左侧的空白）

是的，这是因为您将容器设置为

最大宽度

，然后使用

边距：0 auto

将其居中，所以在更宽的屏幕上，这正是将发生的情况

在下面的示例中，我在包装上添加了一个边框，这样就可以看到发生了什么

*{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：960像素；
保证金：0自动；
边框：添加1px点红色；/*以显示正在发生的事情*/
}
.集装箱{
显示器：flex；
}
.盒子{
高度：100px；
最小宽度：100px；
利润率：20px；
}
.一{
背景：紫色；
}
.二{
背景：黄色；
}
.三{
背景：橙色；
}

我褪色了
我褪色了
我褪色了

如果你点击整个页面，你会看到如下内容：（紫色方框左侧的空白）

是的，这是因为您将容器设置为

最大宽度

，然后使用

边距：0 auto

将其居中，所以在更宽的屏幕上，这正是将发生的情况

在下面的示例中，我在包装上添加了一个边框，这样就可以看到发生了什么

*{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：960像素；
保证金：0自动；
边框：添加1px点红色；/*以显示正在发生的事情*/
}
.集装箱{
显示器：flex；
}
.盒子{
高度：100px；
最小宽度：100px；
利润率：20px；
}
.一{
背景：紫色；
}
.二{
背景：黄色；
}
.三{
背景：橙色；
}

我褪色了
我褪色了
我褪色了

@h99lb0y当一个答案当场给出时，你应该接受它为well@h99lb0y当一个答案恰到好处时，你也应该接受它