父元素設(shè)置為flex后,子元素{flex:0 0 33.3333%}
在同一排可以三等分,
但是如果子元素添加了邊框,那么同一排只能排列2個,flex彈性伸縮,不計算border寬度嗎?
子元素上加上
box-sizing: border-box;
包不包括內(nèi)邊距和邊框是兩種盒模型,由box-sizing控制
參考:https://developer.mozilla.org...
你只要給flex設(shè)置了flex-wrap: wrap;
,它就不是伸縮了,超出了就會換行。
解決方法如一樓所示,當(dāng)然你也可以使用calc函數(shù)將flex的值減去border的值(flex:0 0 calc(33.333% - 2px)
),或者使用outline: 1px solid red;
,outline是不會將寬度計算進(jìn)去的,你的這段代碼可以不用flex: 0 0 33.333%
這樣寫,直接寫width:33.33%
或者flex:33.33%
。