移动端视图下如何让内容适配容器元素？

问题分析 #

核心问题有两点：

• .white容器同时设置了flex: 50%和固定width:720px、height:600px，两者属性冲突，固定尺寸限制了容器的自适应能力
• 内部.text元素没有设置填充容器的样式，再加上.white用了align-items: center和justify-content: center，导致内容仅在中间区域，无法占据容器大部分空间

修正后的代码 #

CSS 代码 #

.white{
    background-color: rgb(252, 252, 252);
    flex: 50%;
    display: flex;
    /* 移除固定宽高，让flex属性自动分配空间 */
    /* width: 720px; */
    /* height: 600px; */
    /* 调整对齐方式，让内容从顶部开始排列 */
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2rem; /* 添加内边距，避免内容贴容器边缘 */
}

.text {
    width: 100%; /* 让文本容器占满父容器可用宽度 */
    max-width: 600px; /* 可选：限制最大宽度，避免文本过宽影响阅读 */
}

@media (max-width: 768px) {
  .flexed {
    display: flex;
    flex-wrap: wrap-reverse;
  }
  .white {
    flex: 100%;
    padding: 1.5rem; /* 移动端适配内边距 */
  }
  .btn {
    width: 100%;
  }
  .heading {
    font-size: 40px;
  }
  .para {
    width: 100%;
  }
}

HTML 代码（无需修改） #

<div class="column">
  <div class="flexy">
    <div class="black">
      <div class="test">
        <img src="assets/no3_logo1.svg">
      </div>
    </div>
    <div class="white">
      <div class="text">
        <p class="heading">Feature that is amazing.</p>
        <p class="para">Lo sectetur adipisicing elit. Commodi quasi dignissimos eos obcaecati aliquid dicta consequatur ipsa laudantium atque deserunt!</p>
        <button class="btn">Learn More</button>
      </div>
    </div>
  </div>

效果说明 #

• 移除固定宽高后，.white会根据flex属性自动占据父容器的对应比例空间
• .text设置width:100%后会填满.white的可用宽度，配合内边距让内容自然占据容器大部分区域
• 如果需要内容垂直居中，可保留align-items: center，但需保持.text的width:100%设置，确保宽度占满容器

效果截图：

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