实现两栏布局如图所示样式：

   方法1： 

  <div style="display: flex; justify-content: space-between; width:100%;">

      <div>1</div>

      <div>2</div>

     </div>

   方法2：

  <div style="display: flex; width:100%;">

      <div style="width: 50%;">1</div>

      <div style="margin-left:49%;">2</div>

     </div>

实现两栏布局，左面固定，右面自适应

 方法1：

    <div>

      <div class="left" style='width:20rem; height:20vh; background:green;float:left;'></div>

      <div class="right" style='height:20vh;margin-left:20rem ;width:100%; background:red;'></div>

     </div>

方法2：

    <div  style='height:20vh;display: flex;'>

      <div class="left" style='width:20rem; height:20vh; background:green;'></div>

      <div class="right" style='height:20vh;width:calc(100% - 20rem); background:red;'></div>

     </div>