使用flexbox，您可以简单地将a设置
max-width为容器，因为您的元素具有固定的宽度：
.flex-container { display: flex; flex-wrap: wrap; max-width:calc(5*(200px + 20px));}.flex-item { background: tomato; padding: 5px; width: 200px; height: 100px; margin: 10px; line-height: 100px; color: white; font-weight: bold; font-size: 2em; text-align: center; box-sizing:border-box;}<div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> <div >8</div></div>唯一的缺点是您需要知道元素的宽度及其边距才能正确设置
max-width。
如果您希望元素扩展并覆盖所有宽度，可以使用以下技巧
min-width：
.flex-container { display: flex; flex-wrap: wrap;}.flex-item { background: tomato; padding: 5px; min-width: 200px; width:calc(100%/5 - 20px); height: 100px; margin: 10px; line-height: 100px; color: white; font-weight: bold; font-size: 2em; text-align: center; box-sizing:border-box;}<div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> <div >8</div></div>在这里，您还需要考虑边距，您可以使用CSS变量轻松地使它更加灵活：
.flex-container { display: flex; flex-wrap: wrap;}.flex-item { --m:10px; background: tomato; padding: 5px; min-width: 200px; width:calc(100%/5 - 2*var(--m)); height: 100px; margin: var(--m); line-height: 100px; color: white; font-weight: bold; font-size: 2em; text-align: center; box-sizing:border-box;}<div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> <div >8</div></div>您还可以考虑
flex-grow是否希望元素始终扩展（即使有换行），但是您可能会遇到需要修复一些问题的最后一行的问题：
.flex-container { display: flex; flex-wrap: wrap; --m:10px;}.flex-item { background: tomato; padding: 5px; min-width: 200px; flex-grow:1; width:calc(100%/5 - 2*var(--m)); height: 100px; margin: var(--m); line-height: 100px; color: white; font-weight: bold; font-size: 2em; text-align: center; box-sizing:border-box;}.flex-container span { min-width: 200px; flex-grow:1; width:calc(100%/5 - 2*var(--m)); margin:0 var(--m);}<div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> <div >8</div> <!-- 4 empty elements to fix the issue (we can also use pseudo element) --> <span></span> <span></span> <span></span> <span></span></div>在下面的示例中，我们将列数设置为5，因此，如果在最后一行中有1-4个元素，则至少需要4个空元素才能解决此问题。当然，这是一个缺点，但是由于您知道列数，因此可以轻松设置这些空元素，并且不需要任何JS。
为了使其更加灵活，这是一个带有CSS变量的想法：
.flex-container { display: flex; flex-wrap: wrap; border:1px solid; --m:10px; --n:5; --width:150px;}.flex-item { background: tomato; min-width: var(--width); flex-grow:1; width:calc(100%/var(--n) - 2*var(--m)); height: 50px; margin: var(--m); box-sizing:border-box;}.flex-container span { display:contents; }.flex-container span:before,.flex-container span:after,.flex-container:before,.flex-container:after{ content:""; min-width: var(--width); flex-grow:1; width:calc(100%/var(--n) - 2*var(--m)); margin:0 var(--m); order:1; }<div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> <div >8</div> <!-- a lot of elements !! --> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span></div><div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> <div >8</div> <!-- a lot of elements !! --> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span></div><div > <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> <div >6</div> <div >7</div> <div >8</div> <!-- a lot of elements !! --> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span></div>我曾经
display:contents能够设置N个空元素，以后将其视为2 * N，这可以减少代码。
如果您将有7列，我们将只需要6个额外的元素。我们可以使用两个伪元素，然后仅使用2个空元素来覆盖其余的4个。
