文章詳情頁
css3 flex 子元素添加邊框后的問題
瀏覽:198日期:2023-06-20 08:02:19
問題描述
父元素設置為flex后,子元素{flex:0 0 33.3333%}在同一排可以三等分,
但是如果子元素添加了邊框,那么同一排只能排列2個,flex彈性伸縮,不計算border寬度嗎?
問題解答
回答1:子元素上加上
box-sizing: border-box;
包不包括內邊距和邊框是兩種盒模型,由box-sizing控制參考:https://developer.mozilla.org...
回答2:你只要給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%。
標簽:
CSS
相關文章:
1. 我在centos容器里安裝docker,也就是在容器里安裝容器,報錯了?2. docker-compose中volumes的問題3. docker不顯示端口映射呢?4. golang - 用IDE看docker源碼時的小問題5. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗!6. docker容器呢SSH為什么連不通呢?7. javascript - 最近用echarts做統計圖時遇到兩個問題!!8. mac里的docker如何命令行開啟呢?9. javascript - 連續點擊觸發mouseleave事件10. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””
排行榜

網公網安備