gpt4 book ai didi

html - Flexbox 布局 - 等高和 fittext

转载 作者:太空宇宙 更新时间:2023-11-04 07:17:15 24 4
gpt4 key购买 nike

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

  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;
}

.bottom_content {
display:flex;
flex-direction:column;
}

.section1 {
flex:1;
font-size:20px;
text-align:center;
}

.section2 {
flex:1;
}

.btn {
background:red;
color:white;
padding:20px;
}
<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>

我正在努力实现这一点......

enter image description here

如何使底部等高并使其中的内容垂直和水平居中?

我还计划使用 fittext.js 或类似工具来使按钮和上面的文本适合 flex 元素。

我哪里错了?

最佳答案

问题

您当前代码的问题是 .bottom 没有填充可用空间,并且正在使用默认对齐方式和对齐方式。

修复

可以通过执行以下操作来实现所需的输出:

  • .section1.section2 中删除 flex:1;。这会阻止这些 div 扩展以填充可用空间
  • align-items: center;justify-content: space-evenly; 添加到 .bottom_content。这将使 .section1.section2 div
  • 居中对齐并均匀分布
  • display: flex; 添加到.bottom。这将使 .bottom 扩展以适应可用空间
  • .bottom 上将 flex: 1; 更改为 flex: 1 0 auto;。这将阻止 .bottom 在窗口高度较小时减小尺寸

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 {
/*Change*/
flex: 1 0 auto;
background: teal;
/*Add*/
display: flex;
}

.bottom_content {
display: flex;
flex-direction: column;
/*Add*/
align-items: center;
justify-content: space-evenly;
}

.section1 {
/*Remove*/
/*flex:1;*/
font-size: 20px;
text-align: center;
}

.section2 {
/*Remove*/
/*flex:1;*/
}

.btn {
background: red;
color: white;
padding: 20px;
}
<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>

关于html - Flexbox 布局 - 等高和 fittext,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50621543/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com