flex实现等宽布局且间隔相等的小技巧。使用flex 布局让子元素宽度均分且左右间距相等。flex宽度自适应,均分宽度,而且有一样的间距 电脑版发表于:2023/2/7 23:12 **html:** ``` <section class="father"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </section> ``` **css:** ``` .father { display: flex; padding : 20px; width: 300px; height : 200px; border : 5px solid #000; } .item { flex : 1; } .item-1 { background: red; } .item-2 { background: green; } .item-3 { background: blue; } /*重点代码*/ .father .item + .item { margin-left : 20px; } ``` **这里父容器设置了padding值,会影响父容器的宽高,如果不想影响可以设置** ``` box-sizing: border-box; ``` 原文地址:https://blog.csdn.net/sinat_33255495/article/details/118324934