當 flex-basis 和 flex-grow 都被設置時，彈性項目之間的空間是如何分配的？

Question

我正在閱讀來自 MDN 的基本 flexbox 教程，並且無法了解在設置flex-basis時剩余空間如何在 flex 項目之間分配。

在現場演示中，我設置了以下代碼：

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

我的瀏覽器屏幕是1369px ，取出滾動條后，我只剩下1349px 。 MDN 說

“每個flex item會先被分配200px的可用空間，之后，可用空間的rest會按照比例單位進行分攤。”

所以每篇文章在最小200px之后的可用空間應該是1349px - 3*200px = 749px 。 現在，文章三應該得到一半的可用空間加上200px ，即200 + 749/2 = 575.5 。 從兩邊取出10px的邊距空間，我們得到555.5px ，但在我的筆記本電腦中它占據535.5px 。

下面是工作演示：

 * { box-sizing: border-box; } html { font-family: sans-serif; } body { margin: 0; } header { background: purple; height: 100px; } h1 { text-align: center; color: white; line-height: 100px; margin: 0; } article { padding: 10px; margin: 10px; background: aqua; flex: 1 200px; } /* Add your flexbox CSS below here */ section { display: flex; } article:nth-of-type(3) { flex: 2 200px; }

 <header> <h1>Sample flexbox example</h1> </header> <section> <article> <h2>First article</h2> <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p> </article> <article> <h2>Second article</h2> <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p> </article> <article> <h2>Third article</h2> <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p> <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p> </article> </section>

1. 請解釋當 flex-basis 和 flex-grow 都設置時，彈性項目之間的空間是如何分配的？

2. 如果我article:nth-of-type(3) { flex: 2; } article:nth-of-type(3) { flex: 2; }它沒有給第 3 條加倍空格，為什么？

Answer 1

應首先考慮邊距並從總寬度中刪除以計算可用空間。 不是以后，就像你正在做的那樣。

所以你所有的元素都以200px寬度和20px邊距開始。 免費空間將為1350px - 3*200px - 3*20x = 690px 。 現在，文章三的寬度應該等於2/4*690px + 200px = 545px （而不是555px ）

沒有box-sizing你會有1350px - 3*220px - 3*20x = 630px並且寬度是535px