Html 如何在flexbox中消除额外的容器间距？

我是flexbox的新手，但在W3页面上找不到任何解释如何消除额外容器间距的内容

例如，以他们的一个例子来说，我不确定我怎样才能基本上得到与左、中、右浮动相同的东西，并消除容器中显示的所有灰色区域

如果我只想给孩子们看，而不想展示容器的背景呢

.flex容器{
显示：-webkit flex；
显示器：flex；
宽度：自动；
高度：自动；
背景颜色：浅灰色；
}
.弹性项目{
背景颜色：矢车菊蓝；
宽度：自动；
高度：自动；
边际：0px；
边框：1px纯黑；
}

弹性项目1
弹性项目2
弹性项目3

要定位项目的左、中、右位置，一种简单易行的方法是使用

对齐内容

属性：

.flex容器{
显示器：flex；
对齐内容：间距；/*新建*/
背景颜色：浅灰色；
}
.弹性项目{
边框：1px纯黑；
背景颜色：矢车菊蓝；
}

弹性项目1
弹性项目2
弹性项目3

使用

显示：内联flex或项目上的
flex:1
其他人回答了这个问题，但现在我知道如果我想要一些专栏的话，如何做到这一点，所以谢谢。