Why do my Flexbox elements with set height no longer work after setting min-height to the parent?
Question
I am re-doing the official Tesla website just to get a bit of practice, I am aiming for the Cybertruck page. Here is the official look of it.
https://www.tesla.com/cybertruck
The page consists of one section that I gave a min-height of 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 .
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% .
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 answers
solution1
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. Then you only need to set the flex direction to a column and set justify-content to flex-end.
.main-cybertruck-section{ min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end }
solution2
1 ACCPTED 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. If you would replace the height: 90% with an fixed height like height: 90vh it would actually work.
Another approach is to align the <span> itself within the <section> , as shown in the following example:
.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>
solution3
1 2021-05-31 14:28:02
In .main-cybertruck-section section you have to use height instead of min-height.I practiced it. It was work for me.
here is my css snippets:
.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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.