css 布局中，子组件完全占满父组件的空间

1、可以使用宽度百分比的形式，下面的例子是各占一半

<style> .main{ height:50px; width:200px; display:flex; } .left{ width:50% } .right{ width:50% } </style> <div class='main'> <div class='left'></div> <div class='right'></div> </div>

2、其中一部分子组件自由变化，后面的子组件固定宽度或者默认宽度

<style> .main{ display:flex; height:50px; width:200px; } .left{ flex:1; } .right{ width:20px; } </style> <div class='main'> <div class='left'></div> <div class='right'></div> </div>