一、问题场景

传统使用width属性配合float总是最右边出现间隙，需要实现任意个DIV的完美等分，包括横向和纵向

二、实现

父元素样式

/*盒模型*/display: -webkit-box;display: -moz-box;display: box;/*横向or纵向*/-webkit-box-orient: horizontal; /* 垂直是vertical */-moz-box-orient: horizontal; /* 垂直是vertical */box-orient: horizontal;

子元素样式

-webkit-box-flex: 1;-moz-box-flex: 1;box-flex: 1;

三、完整代码

<template> <div class="main-box"> <div class="main-box-content">1</div> <div class="main-box-content">2</div> <div class="main-box-content">3</div> </div></template><script> import serialport from ‘serialport‘ export default { name: "MainPage", data: function () { return { serialPortList: [] } }, methods: { handleScanSerialPortList: function () { serialport.list().then( ports => { console.log(ports) } ) } } }</script><style scoped> .main-box { /*盒模型*/ display: -webkit-box; display: -moz-box; display: box; /*横向or纵向*/ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; } .main-box-content { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }</style>