您给出的a是正确的，
flex-basis: 20%但是您必须调整每个 flex项目 上的4px边距以使其正确 包装 。
最后一行的等宽Flex项目
用途
flex: 0 1 calc(20% - 8px)-这表示商品的宽度不会超过宽度的20％（调整边距），并且可以根据容器的宽度缩小。请参见下面的演示：
.container { background: gray; width: 600px; height: 200px; display: flex; flex-flow: row wrap; position: relative;}.item { background: blue; margin: 4px; flex: 0 1 calc(20% - 8px); }<div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div></div>另一种方法有点 怪诞 -您可以将
flex-grow设置为1并
flex-basis: calc(20% - 4px)使用
flex: 1 1calc(20% - 4px)，并使用 伪元素 填充剩余的空间：
.container { background: gray; width: 600px; height: 200px; display: flex; flex-flow: row wrap; position: relative;}.item { background: blue; margin: 4px; flex: 1 1 calc(20% - 8px); }.container:after { content: ''; display: block; flex: 999; }<div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div></div>如果您没有 每行n个项目的 要求，则可以参考以下内容：
- 像网格自动流动密集的无序列表
最后一行的伸缩项目会扩展以填充可用空间
如果一行中的项目少于5个，并且希望它们填充剩余空间，请使用
flex: 1 1 calc(20% - 8px)（请注意，
flex-grow此处将其设置为1，以便最后一行中的 flex项目 扩展为填充剩余空间 ）：
.container { background: gray; width: 600px; height: 200px; display: flex; flex-flow: row wrap; position: relative;}.item { background: blue; margin: 4px; flex: 1 1 calc(20% - 8px); }<div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div></div>
