我想在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）亂搞需要。