Html Flexbox布局-等高和fittext

我正在尝试使用flexbox构建一个基本的用户界面，到目前为止我已经做到了

body，html{
保证金：0；
填充：0；
身高：100%；
}
.集装箱{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.顶{
弹性：4；
显示器：flex；
背景：小麦；
对齐项目：居中；
证明内容：中心；
}
.底部{
弹性：1；
背景：水鸭；
}
.底部内容{
显示器：flex；
弯曲方向：立柱；
}
.第1节{
弹性：1；
字体大小：20px；
文本对齐：居中；
}
.第2节{
弹性：1；
}
.btn{
背景：红色；
颜色：白色；
填充：20px；
}

顶级内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam lacus quam，blandit non lacus in，Venetatis Temporal dolor。莱克托斯·拉库斯的阿利夸姆。
这是一个按钮

问题 当前代码的问题是

.bottom

没有填满可用空间，并且正在使用默认对齐和对正

修复 通过执行以下操作可以获得所需的输出：

• 删除

  flex:1来自
  .section1
  和
  .section2
  。这将阻止这些
  div
  s扩展以填充可用空间

• 添加

  对齐项目：居中和
  对正内容：间距均匀至
  。底部内容
  。这将使
  .section1
  和
  .section2
  div
  s居中对齐并均匀隔开

• 添加

  显示：flex至
  。底部
  。这将使
  .bottom
  展开以适合可用空间

• 改变

  flex:1到
  flex:10自动打开
  。底部
  。这将阻止
  .bottom
  在窗口高度较小时缩小尺寸

body，
html{
保证金：0；
填充：0；
身高：100%；
}
.集装箱{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.顶{
弹性：4；
显示器：flex；
背景：小麦；
对齐项目：居中；
证明内容：中心；
}
.底部{
/*改变*/
弹性：10自动；
背景：水鸭；
/*加*/
显示器：flex；
}
.底部内容{
显示器：flex；
弯曲方向：立柱；
/*加*/
对齐项目：居中；
对正内容：空间均匀；
}
.第1节{
/*除去*/
/*弹性：1*/
字体大小：20px；
文本对齐：居中；
}
.第2节{
/*除去*/
/*弹性：1*/
}
.btn{
背景：红色；
颜色：白色；
填充：20px；
}

顶级内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam lacus quam，blandit non lacus in，Venetatis Temporal dolor。莱克托斯·拉库斯的阿利夸姆。
这是一个按钮

我已经对您的一些代码进行了注释。请查收

body，
html{
保证金：0；
填充：0；
身高：100%；
}
.集装箱{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.顶{
弹性：4；
显示器：flex；
背景：小麦；
对齐项目：居中；
证明内容：中心；
}
.底部{
弹性：1；
背景：水鸭；
}
.底部内容{
显示器：flex；
弯曲方向：立柱；
}
.第1节{
字体大小：20px；
文本对齐：居中；
}
.第2节{
弹性：1；
}
.btn{
背景：红色；
颜色：白色；
填充：20px；
边缘顶部：25px；
}

顶级内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam lacus quam，blandit non lacus in，Venetatis Temporal dolor。莱克托斯·拉库斯的阿利夸姆。
这是一个按钮

调整内容：中心和
显示：flex
是关键

你可以随心所欲地调整边距，而且它也应该起作用

.bottom_content {
   display: flex;
   flex-direction: column;
   margin-top: 20px;
}

.section2 {
   flex: 1;
   display: flex;
   justify-content: center;
}

.btn {
   background: red;
   color: white;
   padding: 20px;
   width: fit-content;
   position: absolute;
   margin-top: 10px;
}

谢谢，这很好地修复了布局！当我开始缩小屏幕尺寸时，flexbox项目的高度开始改变。有没有办法锁定尺寸以防止出现这种情况？没问题。您特别希望限制哪些高度？我希望第1节和第2节保持高度比ie；始终保持50%的高度。然后，我计划使用fittext.js之类的工具将文本调整为fittext，因为屏幕宽度变小，底部框的高度增加。我正努力做到这一点，这样他们才能保持他们的信心height@fightstarr20我不确定我是否理解您的意图，容器将展开以确保文本适合它。你在找这样的东西吗？