After the parent element is set to flex, the child elements {flex:0 0 33.3333%} can be divided into three equal parts in the same row, 
But if a border is added to the child element, then only 2 can be arranged in the same row. If flex elastically expands, does the border width not be calculated? 
2
0
0
Add
to the
child element
box-sizing: border-box;The package does not include padding and borders, which are two box models, controlled by box-sizing
Reference: https://developer.mozilla.org...
As long as you set flex-wrap: wrap; to flex, it will not stretch, and it will wrap when it exceeds the limit.
The solution is as shown on the first floor. Of course, you can also use the calc function to subtract the border value from the flex value (flex:0 0 calc(33.333% - 2px)),或者使用outline: 1px solid red;，outline是不會(huì)將寬度計(jì)算進(jìn)去的，你的這段代碼可以不用flex: 0 0 33.333%這樣寫，直接寫width:33.33%或者flex:33.33%.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
