为什么我的 Flexbox 元素在将 min-height 设置为父级后不再起作用？
[英]Why do my Flexbox elements with set height no longer work after setting min-height to the parent?
问题描述
I am re-doing the official Tesla website just to get a bit of practice, I am aiming for the Cybertruck page.
我正在重新做特斯拉官方网站只是为了练习一下，我的目标是Cybertruck页面。 Here is the official look of it.这是它的官方外观。
https://www.tesla.com/cybertruck https://www.tesla.com/cybertruck
The page consists of one section that I gave a min-height of 100vh.该页面由一个部分组成，我给出的最小高度为 100vh。 The section contains two elements (text and a button that are inside a span) and I want to position them to the bottom-center of the section by using Flexbox .该部分包含两个元素（文本和一个跨度内的按钮），我想使用 position 将它们放在该部分的底部中心Flexbox 。
Core of the problem问题的核心
The text and button align perfectly to the center, but not to the bottom.文本和按钮与中心完美对齐，但不与底部对齐。 I gave the span element a flex-direction: column and align-items: center which works fine, however, the elements don't align themselves to the bottom of the section when I use justify-content: flex-end and height: 90% .我给span元素一个flex-direction: column和align-items: center效果很好，但是，当我使用justify-content: flex-end和height: 90%时，这些元素不会将自己对齐到该部分的底部height: 90% 。
Do you have any suggestions on how to deal with this problem?你对如何处理这个问题有什么建议吗？
.main-cybertruck-section { background-image: url('../IMGs/cybertruck-page/cybertruck-main.jpg'); background-position: center; background-size: cover; padding-top: 1px; min-height: 100vh; }.cybertruck-utility { font-size: 1em; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 90%; }.cybertruck-neon-text { color: rgb(255, 255, 255); text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff, 0 0 80px #0ff, 0 0 90px #0ff, 0 0 100px #0ff, 0 0 150px #0ff; padding-top: 1px; }.cybertruck-order-button { text-decoration: none; text-shadow: 0 0 1em #fff; box-shadow: 0 0 1em 0; color: #fff; border: 0.5em solid; padding: 0.01em 2em 0.01em 2em; margin-top: 2em; }
<body class="cybertruck"> <section class="main-cybertruck-section"> <span class="cybertruck-utility"> <p class="cybertruck-neon-text intro-text">BETTER UTILITY THAN A TRUCK WITH MORE PERFORMANCE THAN A SPORTS CAR</p> <a class="cybertruck-order-button" href="#">ORDER NOW</a> </span> </section> </body>
3 个解决方案
解决方案1
1 2021-05-31 14:18:41
If your aim is to move the span to the end of the section then you should have the section be a flex container.如果您的目标是将跨度移动到该部分的末尾，那么您应该让该部分成为一个 flex 容器。 Then you only need to set the flex direction to a column and set justify-content to flex-end.那么你只需要将flex方向设置为一个列，并将justify-content设置为flex-end。
.main-cybertruck-section{ min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end }
解决方案2
1 已采纳 2021-05-31 14:19:36
The problem is that your elements are indeed aligned at the flex end, but since the height of the <span> is as high as its child elements, you don't see that.问题是您的元素确实在 flex 端对齐，但是由于<span>的高度与其子元素一样高，您看不到这一点。 If you would replace the height: 90% with an fixed height like height: 90vh it would actually work.如果您将height: 90%替换为像height: 90vh这样的固定高度，它实际上会起作用。
Another approach is to align the <span> itself within the <section> , as shown in the following example:另一种方法是在<section>中对齐<span>本身，如下例所示：
.main-cybertruck-section { background: lightgray; /* replaced image with color, because link was broke */ background-position: center; background-size: cover; padding-top: 1px; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; }.cybertruck-utility { font-size: 1em; display: flex; flex-direction: column; align-items: center; }.cybertruck-neon-text { color: rgb(255, 255, 255); text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff, 0 0 80px #0ff, 0 0 90px #0ff, 0 0 100px #0ff, 0 0 150px #0ff; padding-top: 1px; }.cybertruck-order-button { text-decoration: none; text-shadow: 0 0 1em #fff; box-shadow: 0 0 1em 0; color: #fff; border: 0.5em solid; padding: 0.01em 2em 0.01em 2em; margin-top: 2em; }
<body class="cybertruck"> <section class="main-cybertruck-section"> <span class="cybertruck-utility"> <p class="cybertruck-neon-text intro-text">BETTER UTILITY THAN A TRUCK WITH MORE PERFORMANCE THAN A SPORTS CAR</p> <a class="cybertruck-order-button" href="#">ORDER NOW</a> </span> </section> </body>
解决方案3
1 2021-05-31 14:28:02
In .main-cybertruck-section section you have to use height instead of min-height.I practiced it.在.main-cybertruck-section部分中，您必须使用高度而不是最小高度。我练习过。 It was work for me.这对我来说是工作。
here is my css snippets:这是我的 css 片段：
.main-cybertruck-section {
background-image: url('../img/cybertruck.jpg');
background-position: center;
background-size: cover;
padding-top: 1px;
height: 100vh;
}
.cybertruck-utility {
height: 90%;
font-size: 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align:center;
}
.cybertruck-neon-text {
color: rgb(255, 255, 255);
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #0ff,
0 0 80px #0ff,
0 0 90px #0ff,
0 0 100px #0ff,
0 0 150px #0ff;
padding-top: 1px;
}
.cybertruck-order-button {
text-align: center;
text-decoration: none;
text-shadow: 0 0 1em #fff;
box-shadow: 0 0 1em 0;
color: #fff;
border: 0.5em solid;
padding: 0.01em 2em 0.01em 2em;
margin-top: 2em;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.