我想在Flexbox行包装容器的大项目之间放置空间。放置大件物品之间的空间Flexbox行包装
之前，我问我的问题，请大家看看在最后Codepen例如在下面的链接的文章的结尾（“让我们尝试一些更好用柔性物品灵活性玩！”）： https://css-tricks.com/snippets/css/a-guide-to-flexbox/
我的问题; 当窗口最宽（> 800px）时，如何在黄色，蓝色和红色（两个旁边和主）之间添加空格？此刻他们连续弯曲，但彼此相对。
我的理解： 项目之间没有空间，因为蓝色（主要）会占用flex的外部宽度的100％，因为它内部的所有文本。 但是如果黄色，蓝色和红色不超过20％，那么我们之间就会有空间（总空间为100％ - 3x20％= 40％）。
我的问题再次出现： 尽管我有一个或几个项目，因为其中的大量文本，Flexbox以外的单独宽度将为100％，因此我想将它们连同一个空格它们之间。 这很容易吗？
谢谢
相当简单，只需使用空间。您可以将margin: 0 100px放在main（我的首选方法）上，或者在第一个旁边添加右边距，并在第二个旁边添加左边距。偷克里斯的（编译）代码，它应该是这样的（你可以在全屏模式下打开的片段）：
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
}
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
@media all and (min-width: 600px) {
.aside {
flex: 1 auto;
}
}
@media all and (min-width: 800px) {
.main {
flex: 3 0px;
margin: 0 100px;
}
.aside-1 {
order: 1;
}
.main {
order: 2;
}
.aside-2 {
order: 3;
}
.footer {
order: 4;
}
}
body {
padding: 2em;
}<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>没有与width（或flex-basis）乱搞需要。