关于柔性箱高度增长的问题
关于柔性箱高度增长的问题
提问于 2017-03-13 02:08:14
我的问题是，当我在Flexbox中输入内容时，它的高度在增长。我不能百分之百确定为什么会发生这种情况，但我相信这与它不是处于绝对地位，因而保持高度属性有关。
其中包括我正在制作的Flexbox样式站点的CodePen和CSS设置(也包括下面的片段)，这里是关于它的信息。
body p {
color: white;
font-size: 30px;
margin-top: 10px !important; }
.home-wrap {
display: flex;
min-height: 100vh;
justify-content: center;
transition: background 1.5s ease-in-out; }
.home-sections {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: 775px;
max-width: 775px; }
.home-sections section {
border-radius: 20px;
border: 3px solid white;
overflow: hidden; }
.home-sections .flex {
display: flex;
flex-direction: row; }
.home-sections .flex--center {
justify-content: center; }
.col-1 {
text-align: center; }
.alignTop {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: 100%;
align-items: flex-start;
transition: opacity 1.5s ease-in-out; }
.alignCenter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
position: relative;
width: 50%; }
.alignBottom {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: 100%;
align-items: flex-end;
transition: opacity 1.5s ease-in-out; }
section.about {
position: absolute;
width: 100%;
height: 220%;
left: 100%;
box-shadow: -6px 6px 8px rgba(0, 0, 0, 0.6);
z-index: 1;
transition: transform 1.5s ease-in-out;
animation: enticing-grow 2s 2;
background-color: #CB7E15; }
section.about .displayB {
display: block;
text-align: center; }
section.about .displayB h1 {
margin-top: 10px;
text-align: center;
font-size: 30px;
text-shadow: 5px 5px 8px white; }
section.about .displayB p {
font-size: 16px; }
section.about .mike-faq {
display: flex;
opacity: 0;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
max-width: 100%;
transition: all 1.5s ease-in-out; }
section.setup {
width: calc(55% - 6px);
height: 80%;
box-shadow: -8px 8px 8px rgba(0, 0, 0, 0.6);
background-color: #004EFF; }
section.social {
width: calc(45% - 6px);
height: 55%;
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.6);
opacity: 0.5;
transition: all 1s ease-in-out;
background-color: #585656; }
section.social:hover {
opacity: 1;
transform: scale(1.5);
z-index: 2; }
section.social .displayB {
display: block; }
section.social .displayB p {
text-align: center;
margin: 10px; }
section.social .social-wrap {
display: flex;
flex-direction: row;
max-width: 100%;
justify-content: space-around; }
section.social .social-wrap .twitter-logo {
background-image: url(/assets/img/twitter-logo.gif);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 20px 0 #1DA1F2; }
section.social .social-wrap .email-logo {
background-image: url(/assets/img/gmail-logo.png);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 20px 0 #E70F10; }
section.social .social-wrap .facebook-logo {
background-image: url(/assets/img/facebook-logo.png);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 10px 5px #3C5A98; }
section.social .social-wrap .github-logo {
background-image: url(/assets/img/github-logo.png);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 20px 0 #E04006; }
section.twitch {
width: calc(55% - 6px);
height: 80%;
box-shadow: -8px -8px 8px rgba(0, 0, 0, 0.6);
background-color: #5A3E85; }
section.twitch h1 {
margin-top: 10px;
font-size: 30px;
text-align: center; }
section.twitch p {
font-size: 16px; }
section.twitch .displayB {
display: block;
text-align: center; }
.button {
color: #5A3E85; }
section.webdesign {
width: calc(45% - 6px);
height: 53%;
box-shadow: 8px -8px 8px rgba(0, 0, 0, 0.6);
background-color: #1F843A; }
section.youtube {
position: absolute;
width: 95%;
height: 140%;
margin-right: 5px;
box-shadow: -8px 0 8px rgba(0, 0, 0, 0.6);
transition: opacity 1.5s ease-in-out;
background-color: #CC181E; }<div class="home-wrap">
<div class="home-sections">
<div class="alignTop">
<section class="twitch">
<div class="flex flex--center displayB">
<h1>Twitch</h1>
<!-- <p>I've been livestreaming on Twitch since it's days as Justin.tv - I plan to pick it back up again once I can figure out a schedule</p> -->
</div>
</section>
<section class="webdesign">
<div class="flex flex--center">
<p>Web Design</p>
</div>
</section>
</div>
<div class="alignCenter">
<section class="youtube">
<div class="flex flex--center">
<P>YouTube</P>
</div>
</section>
<section class="about grown">
<div class="flex flex--center displayB">
<h1>What's Going on, Mike here, and Welcome to my Site!</h1>
<p>I'm your typical 26 year old nerd, who loves computers, video games, pretty much anything tech. Along with that, I have a ton of hobbies that range from playing music to stock investments. </p>
<p>I've always been interested in, and worked on my web design skills, but it wasn't until the past few months where I decided this is what I am passionate about.</p>
<p>With that said, click around the site to learn more about me. All panels are expandable clickable which will allow you to learn more about "Mike" and who I am!</p>
<div class="mike-faq">
<p>FAQ 1</p>
<p>FAQ 2 </p>
<p>FAQ 3</p>
<p>FAQ 4</p>
</div>
</div>
</section>
</div>
<div class="alignBottom">
<section class="setup">
<div class="flex flex--center">
<p>Setup</p>
</div>
</section>
<section class="social">
<div class="flex flex--center displayB">
<p>Social</p>
<div class="social-wrap">
<div class="twitter-logo"></div>
<div class="email-logo"></div>
<div class="facebook-logo"></div>
<div class="github-logo"></div>
</div>
</div>
</section>
</div>
</div>
1-我在站点内容周围有一个包装div，这样我就可以控制后台的流和背景。
2-对于Flexbox的每个“行”，我有另一个包装div，这样我可以让它们在不同的区域对齐(顶部是对齐的Flex-Start，Center是对齐的Flex-Center，底部是对齐的Flex-底部)。
3-2中心Flexboxes (YouTube和About)设置的绝对位置，所以我可以有“关于”部分成长和重叠的顶部和底部的部分。
4-我有所有的跳蚤设置%高度和宽度，所以他们将与窗口的值缩放。
5-在每个flexbox部分中，我有一个容器，这样我就可以操作内容并移动它，使其适合他们的父版本盒。
现在，我还不能100%确定所有嵌套和父/子元素是否是处理我所要做的事情的最佳方法，但我一直无法想象它的任何其他方式，并使它工作(除了我正在做的方式)。
所以--再来看一遍，在“the :面板”中，我有一个<p>部分，当我取消评论时，挠曲盒的高度会增长，而不是保持不变。然而，在“关于”部分，这种情况并没有发生。我唯一能看到的区别是，“关于”部分是position: absolute。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-13 03:25:21
你可以通过给alignTop, alignCenter and alignBottom高度来玩。
http://codepen.io/anon/pen/GWEgMK：试着评论一下你说过的话，然后找出你满意的高度值。
.alignTop {
height:33%;}
.alignCenter {
height:25%;}
.alignBottom {
height:20%;}不确定这正是你想要的，但要做到最诚实，你的代码中有太多杂乱无章的地方，让我们无法真正尝试:)动画甚至相关吗？
Stack Overflow用户
发布于 2017-04-04 16:24:37
您可能希望让柔性盒为您处理高度，而不是让它处理高度，就像按照它设计的那样增长到视口，但是使用带vh单位的最大高度，而不是%值(比如最大高度:75 vh而不是最大高度:75%)。vh使用视口来缩放，而不是父div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42755583
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号