css3 flex 子元素添加邊框后的問題

問題描述

父元素設置為flex后，子元素{flex:0 0 33.3333%}在同一排可以三等分，

但是如果子元素添加了邊框，那么同一排只能排列2個，flex彈性伸縮，不計算border寬度嗎？

問題解答

子元素上加上

box-sizing: border-box;

包不包括內邊距和邊框是兩種盒模型,由box-sizing控制參考：https://developer.mozilla.org...

你只要給flex設置了flex-wrap: wrap;，它就不是伸縮了，超出了就會換行。

解決方法如一樓所示，當然你也可以使用calc函數將flex的值減去border的值(flex:0 0 calc(33.333% - 2px)),或者使用outline: 1px solid red;，outline是不會將寬度計算進去的，你的這段代碼可以不用flex: 0 0 33.333%這樣寫，直接寫width:33.33%或者flex:33.33%。