您可以使用
flex: 1 0 22%例如。这将使您的元素定义
22%为
flex-basis
（每行仅4个元素），并且它们将增长以填充由边距留下的剩余空间（因为
flex-grow设置为
1）
#foto-container { display: flex; flex-wrap: wrap; justify-content: space-around; margin: 10px;}.foto { flex: 1 0 22%; min-height: 50px; margin: 1px; background-color: red;}<div id="foto-container"> <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 >9</div> <div >1</div> <div >2</div> <div >3</div></div>的值
flex-basis应大于
(20% - margin * 2)和小于
(25% - margin *2)。第一个值将使您每行具有5个元素，因此，具有更大的值将使它们变为4，而具有比第二个更大的值将使您每行具有3个元素。
#foto-container { display: flex; flex-wrap: wrap; justify-content: space-around; margin: 10px;}.foto { flex: 1 0 21%; min-height: 50px; margin: 1px; background-color: red; animation: change 4s linear infinite alternate;}@keyframes change { 0%,40% {flex: 1 0 calc(20% - 2 * 1px);background:yellow;} 41%,59% {background:red;} 60%,100% {flex: 1 0 calc(25% - 2 * 1px + 1px);background:green;}}<div id="foto-container"> <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 >9</div> <div >1</div> <div >2</div> <div >3</div></div>
