调整窗口大小时消除两个Flex项目间空隙的方法

算力阿峰

2026-7-21

布局调整求助

当前页面效果：

希望实现的效果：
理想页面效果

CSS代码末尾的注释里包含我尝试过的所有媒体查询，麻烦指出问题所在，并告知如何实现理想布局，谢谢。

现有代码

CSS代码

#wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  @media screen and (max-width: 1300px) {
    flex-wrap: wrap;
  }
}


/*LAYOUT**/

.cont {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cont section {
  display: flex;
  width: 100%;
}

.cont .left {
  /* flex-basis: 50%; */
  float: left;
  left: 0;
  padding: 4rem;
  background-color: #ffffff;
  /* 20211129_수정 */
  box-sizing: border-box;
}

.cont .right {
  float: right;
  right: 0;
  /* flex-basis: 50%; */
  padding: 4rem;
  box-shadow: -1.52vh 0 3.8vh -.95vh rgba(0, 0, 0, .4);
  box-sizing: border-box;
}


/* .cont .topbox{
    height: 30rem;
    box-sizing: border-box;

} */

@media screen and (max-width: 1300px) {
  .cont {
    display: inline-flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
  }
  .cont section {
    width: 100%;
    height: auto;
  }
  .cont .left,
  .cont .right {
    transform: scale(0.6);
    resize: both;
    width: 100%;
    justify-content: center;
  }
}


/* @media screen and (max-width: 1300px) {
    #wrap {
        width: 100%;
        height: 100%;
    }
    .cont {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .cont section {
        width: 100%;
        height: auto;
    }
    .cont .left{
        width: 100%;
    }
    .cont .right {
        position: inline-block;
        justify-content: center;
    }
} */


/* @media screen and (max-width: 1300px) {
    .cont {
        display: flex;
        flex-direction: row;
        height: auto;
        justify-content: center;
        position: fixed;
    }
    
    .cont .left,
    .cont .right {
        width: 100%;
        transform: scale(0.6);

    }
} */


/* @media (max-width: 1300px) {
    .cont {
        display: flex;
        flex-wrap: wrap;
        height: auto;
    }

    .cont .left, .cont .right {
        width: 100%;
    }

    .cont .left {
        padding-right: 0;
    }

    .cont .right {
        padding-left: 0;
    }
} */


/* @media (max-width: 1300px) {
    .cont {
        display: inline-block;
        position: relative;
    }
    .cont section {
        height: auto;
    }
    .cont .left,
    .cont .right {
        width: 100%;
        height: auto;
        transform: scale(0.8);
        justify-content: center;

    }
} */


/* @media (max-width: 1300px) {

        .cont section{
            display: block;
            width: 100%;
            height: auto;
            
    }
        .cont .left,
        .cont .right {
            width: 100%;
            float: none;
            display: inline-flex;
            flex-direction: column;
            align-items: center;

        }
    } */


/* @media (max-width: 1300px) {
        .cont section {
            display: block;
            width: 100%;
            height: auto;
        }
        .cont .left,
        .cont .right {
            width: 100%;
            float: none;
            display: inline-block;
        }
    } */

HTML代码

<div id="wrap" class="index" style="display:flex">
  <div class="cont">
    <section class="topbox">
      <br>
      <br>
    </section>
    <section class="left">
      <div class="inner">
        <div class="tbl_row">
          <p class="day">2019. 6. 10. MON</p>
        </div>
        <div class="tbl_row">
          <h1 class="name">더센터오브필라테스 부산서면점</h1>
        </div>
        <div class="tbl_row">
          <div class="shop_logo">
            <div class="logo">
              <img src="../img/sample_logo.png" alt="">
              <!-- 샘플이미지 -->
            </div>
          </div>
        </div>
        <div class="powered_area">
          <p class="powered">Powered By <img src="../img/logo02.png" alt="FIT TO BE"></p>
        </div>
      </div>
    </section>
    <!-- 키패드 -->
    <section class="right">
      <div class="inner">
        <div class="pw">
          <!-- input 번호 4자리 입력 후 class="open" 추가 -->
          <input type="number" class="input_style" placeholder="휴대전화 번호 뒷자리 4자리">
        </div>
        <ul class="keypad clearfix">
          <li onClick=""><span class="num">1</span></li>
          <li onClick=""><span class="num">2</span></li>
          <li onClick=""><span class="num">3</span></li>
          <li onClick=""><span class="num">4</span></li>
          <li onClick=""><span class="num">5</span></li>
          <li onClick=""><span class="num">6</span></li>
          <li onClick=""><span class="num">7</span></li>
          <li onClick=""><span class="num">8</span></li>
          <li onClick=""><span class="num">9</span></li>
          <li onClick="">
            <div class="num btn_back"><span class="blind">back</span></div>
          </li>
          <li onClick=""><span class="num">0</span></li>
          <li onClick=""><span class="num btn_ok">OK</span></li>
        </ul>
      </div>
    </section>
    <section class="topbox">
      <br>
      <br>
    </section>
    <!-- //키패드 -->
  </div>
</div>

问题分析

布局属性冲突：同时使用float和flex布局，导致元素排版逻辑混乱；.cont设置height:100vh强制占满视口高度，小屏时无法自适应内容高度。
媒体查询逻辑错误：小屏时未正确切换flex方向，反而用transform: scale缩放元素，导致尺寸计算异常，且resize: both属于冗余属性，干扰布局。
冗余结构干扰：空的topbox和<br>标签占用不必要空间，破坏垂直居中的准确性。

解决方案

修正后的CSS代码

#wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

/*LAYOUT**/
.cont {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  gap: 0;
}

.cont .left, .cont .right {
  flex: 1;
  padding: 4rem;
  box-sizing: border-box;
}

.cont .left {
  background-color: #ffffff;
}

.cont .right {
  box-shadow: -1.52vh 0 3.8vh -.95vh rgba(0, 0, 0, .4);
}

/* 小屏适配 */
@media screen and (max-width: 1300px) {
  .cont {
    flex-direction: column;
    gap: 2rem;
  }
  .cont .left, .cont .right {
    width: 100%;
    max-width: 500px;
    box-shadow: 0 0 3.8vh -.95vh rgba(0, 0, 0, .2);
  }
}

优化后的HTML代码

<div id="wrap" class="index">
  <div class="cont">
    <section class="left">
      <div class="inner">
        <div class="tbl_row">
          <p class="day">2019. 6. 10. MON</p>
        </div>
        <div class="tbl_row">
          <h1 class="name">더센터오브필라테스 부산서면점</h1>
        </div>
        <div class="tbl_row">
          <div class="shop_logo">
            <div class="logo">
              <img src="../img/sample_logo.png" alt="">
              <!-- 샘플이미지 -->
            </div>
          </div>
        </div>
        <div class="powered_area">
          <p class="powered">Powered By <img src="../img/logo02.png" alt="FIT TO BE"></p>
        </div>
      </div>
    </section>
    <!-- 키패드 -->
    <section class="right">
      <div class="inner">
        <div class="pw">
          <!-- input 번호 4자리 입력 후 class="open" 추가 -->
          <input type="number" class="input_style" placeholder="휴대전화 번호 뒷자리 4자리">
        </div>
        <ul class="keypad clearfix">
          <li onClick=""><span class="num">1</span></li>
          <li onClick=""><span class="num">2</span></li>
          <li onClick=""><span class="num">3</span></li>
          <li onClick=""><span class="num">4</span></li>
          <li onClick=""><span class="num">5</span></li>
          <li onClick=""><span class="num">6</span></li>
          <li onClick=""><span class="num">7</span></li>
          <li onClick=""><span class="num">8</span></li>
          <li onClick=""><span class="num">9</span></li>
          <li onClick="">
            <div class="num btn_back"><span class="blind">back</span></div>
          </li>
          <li onClick=""><span class="num">0</span></li>
          <li onClick=""><span class="num btn_ok">OK</span></li>
        </ul>
      </div>
    </section>
    <!-- //키패드 -->
  </div>
</div>

关键调整点

移除.cont的height:100vh，让内容高度自适应，配合#wrap的垂直居中保证整体布局居中。
用flex:1替代float属性，让left和right平分宽度，避免布局冲突。
小屏时将.cont的flex-direction改为column，实现垂直排列，同时调整阴影样式适配垂直布局。
移除无用的topbox和<br>标签，简化结构。
增加max-width限制元素宽度，避免大屏或小屏时内容过宽影响美观；给#wrap添加内边距，避免内容贴边。

内容的提问来源于stack exchange，提问作者user21911024

调整窗口大小时消除两个Flex项目间空隙的方法

现有代码 #

CSS代码

HTML代码

问题分析 #

解决方案 #

修正后的CSS代码 #

优化后的HTML代码 #

关键调整点 #

现有代码

问题分析

解决方案

修正后的CSS代码

优化后的HTML代码

关键调整点