在CSS Flexbox行换行的大项目之间留出空间

我想在Flexbox行包装容器的大型项目之间留出空间

在我提问之前，请看一看文章末尾下面链接中的最后一个Codepen示例（“让我们通过使用flex items灵活性来尝试更好的方法！”）：

我的问题； 当窗口最宽（>800px）时，如何在黄色、蓝色和红色（两个侧边和主边）之间添加空间？目前，他们是弯曲的一排，但对对方的赌注

我的理解是： 项目之间没有空格，因为蓝色（主）占据了flex外部的100%宽度，因为所有文本都在flex内部。 但如果黄色、蓝色和红色的宽度都不超过20%，那么它们之间就有了空间（总空间为100%-3x20%=40%）

我的问题是： 尽管事实上，我有一个或几个项目，它们在Flexbox外部的单独宽度将是100%，因为它们内部有很多文本，但我希望在它们之间有空格的行上调整它们。 这容易做到吗

---

谢谢

非常简单，只需使用边距即可。您可以将

margin:0 100px

放在

main

上（我喜欢的方法），或者在第一个边上添加一个右边距，在第二个边上添加一个左边距。窃取Chris（已编译）的代码，看起来是这样的（您可能必须全屏打开代码片段）：

.wrapper{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
柔性流：行换行；
字体大小：粗体；
文本对齐：居中；
}
.wrapper>*{
填充：10px；
弹性：1100%；
}
.标题{
背景：番茄；
}
.页脚{
背景：浅绿色；
}
梅因先生{
文本对齐：左对齐；
背景：深蓝；
}
.1-1{
背景：金；
}
.2-2{
背景：火红；
}
@介质和全部（最小宽度：600px）{
.旁白{
弹性：1自动；
}
}
@介质和全部（最小宽度：800px）{
梅因先生{
flex:30px；
利润率：0.100px；
}
.1-1{
顺序：1；
}
梅因先生{
顺序：2；
}
.2-2{
顺序：3；
}
.页脚{
顺序：4；
}
}
身体{
填料：2米；
}

标题
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。Mauris Placelat eleifend leo.

旁白1
旁白2
页脚

非常简单，只需使用边距即可。您可以将

margin:0 100px

放在

main

上（我喜欢的方法），或者在第一个边上添加一个右边距，在第二个边上添加一个左边距。窃取Chris（已编译）的代码，看起来是这样的（您可能必须全屏打开代码片段）：

.wrapper{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
柔性流：行换行；
字体大小：粗体；
文本对齐：居中；
}
.wrapper>*{
填充：10px；
弹性：1100%；
}
.标题{
背景：番茄；
}
.页脚{
背景：浅绿色；
}
梅因先生{
文本对齐：左对齐；
背景：深蓝；
}
.1-1{
背景：金；
}
.2-2{
背景：火红；
}
@介质和全部（最小宽度：600px）{
.旁白{
弹性：1自动；
}
}
@介质和全部（最小宽度：800px）{
梅因先生{
flex:30px；
利润率：0.100px；
}
.1-1{
顺序：1；
}
梅因先生{
顺序：2；
}
.2-2{
顺序：3；
}
.页脚{
顺序：4；
}
}
身体{
填料：2米；
}

标题
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。Mauris Placelat eleifend leo.

旁白1
旁白2
页脚