css3 flex 子要素にボーダーを追加した後の問題

Question

親要素が flex に設定された後、子要素 {flex:0 0 33.3333%} は同じ行内で 3 つの等しい部分に分割できます

ただし、子要素にボーダーを追加した場合、同じ行に2つしか配置できないのですが、flexが伸縮する場合、ボーダーの幅は計算されないのでしょうか？

Answer 1

子要素に

を追加します リーリー

パッケージには、box-sizing によって制御される 2 つのボックス モデルであるパディングとボーダーは含まれていません
参考: https://developer.mozilla.org...

Answer 2

フレックスに設定している限りは伸びず、限界を超えると巻き付きます。 flex-wrap: wrap;

ソリューションは 1 階に表示されています。もちろん、calc 関数を使用して、フレックス値から境界値を減算することもできます (

.flex:0 0 calc(33.333% - 2px)),或者使用outline: 1px solid red;，outline是不会将宽度计算进去的，你的这段代码可以不用flex: 0 0 33.333%这样写，直接写width:33.33%或者flex:33.33%)。