Flexbox布局问题：底部区域等高与内容居中及FitText适配

嘿，我来帮你搞定这个Flexbox布局的问题！先拆解下你的需求，然后一步步修正代码：

问题分析 #

你的代码里有两个核心问题导致没达到预期：

1. .bottom容器没有启用Flex布局，且.bottom_content没有占满.bottom的高度，导致两个子区块没法真正平分高度；
2. 区块内的内容没有设置居中相关的Flex属性，无法实现垂直+水平居中的效果。

分步修改方案 #

1. 实现底部两个区块等高 #

给.bottom添加display:flex，同时让.bottom_content占满整个.bottom的空间，这样它的两个子元素就能自动平分高度：

.bottom { flex:1; background:teal; display:flex; }
.bottom_content { flex:1; display:flex; flex-direction:column; }

2. 让区块内内容垂直水平居中 #

给每个section都启用Flex布局，并设置居中属性，同时添加少量内边距避免文本贴边：

.section1 { 
  flex:1; 
  font-size:20px; 
  display:flex;
  align-items: center;
  justify-content: center;
  padding:0 20px;
  color:white; /* 和目标图一致，设置白色文本提升可读性 */
}
.section2 { 
  flex:1; 
  display:flex;
  align-items: center;
  justify-content: center;
}

3. 用FitText.js实现文本适配 #

FitText.js可以自动根据容器宽度调整字体大小，避免文本溢出。使用步骤如下：

• 先引入jQuery（FitText依赖它）和FitText脚本；
• 在页面加载完成后，对需要适配的文本元素初始化FitText，调整缩放系数可以控制字体大小（数值越小字体越大）。

在HTML底部添加这段代码：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>
<script>
  $(document).ready(function(){
    $('.top span').fitText(1.2);
    $('.section1 span').fitText(1.5);
    $('.btn').fitText(1);
  });
</script>

如果不想依赖jQuery，也可以选择纯JS版本的FitText或者textFit等替代工具，用法逻辑类似。

完整代码示例 #

body,html { margin:0; padding:0; height:100%; }
.container { height:100%; display:flex; flex-direction:column; }
.top { flex:4; display:flex; background:wheat; align-items: center; justify-content: center; }
.bottom { flex:1; background:teal; display:flex; }
.bottom_content { flex:1; display:flex; flex-direction:column; }
.section1 { 
  flex:1; 
  font-size:20px; 
  display:flex;
  align-items: center;
  justify-content: center;
  padding:0 20px;
  color:white;
}
.section2 { 
  flex:1; 
  display:flex;
  align-items: center;
  justify-content: center;
}
.btn { 
  background:red; 
  color:white; 
  padding:20px 40px;
  cursor:pointer;
}

<div class="container">
  <div class="top">
    <span>TOP CONTENT</span>
  </div>
  <div class="bottom">
    <div class="bottom_content">
      <div class="section1">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus quam, blandit non lacus in, venenatis tempor dolor. Aliquam in lectus lacus. </span>
      </div>
      <div class="section2">
        <div class="btn"> THIS IS A BUTTON </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>
<script>
  $(document).ready(function(){
    $('.top span').fitText(1.2);
    $('.section1 span').fitText(1.5);
    $('.btn').fitText(1);
  });
</script>

现在这个代码就能实现你要的所有效果：底部两个区块等高，内容垂直水平居中，按钮和文本会自动适配容器宽度。

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