当 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