-1
Hello. All right?
I’m creating a box with three items. One needs to be glued to the top, the other in the middle and the other glued to the bottom, to the base of the layout I need to do.
So I used flexbox
with space-between
, but for some reason it’s not working as expected.
What may be happening to generate this result, different than expected?
Code:
div#apresentation-box {
width: 900px;
height: 900px;
background-color: rgb(5, 5, 5);
display: flex;
flex-flow: column wrap;
justify-content: space-between;
align-items: center;
}
div#border-background {
width: 500px;
height: 250px;
border-style: solid;
border-width: 15px;
border-color: rgba(255, 255, 255, 0.329);
}
div#apresentation-text {
width: 800px;
height: 350px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
span#foundation-date {
font-family: Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: white;
margin-bottom: 25px;
}
span#foundation-date::before,
span#foundation-date::after {
content: "";
background-color: white;
width: 50px;
height: 2px;
display: inline-block;
position: relative;
vertical-align: middle;
margin-left: 20px;
margin-right: 20px;
}
div#apresentation-text p {
font-family: Arial, Helvetica, sans-serif;
font-size: 55px;
font-weight: 900;
color: white;
text-align: center;
}
div#apresentation-text p span{
color: orange;
}
div#apresentation-buttons {
width: 490px;
height: 250px;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
}
div#apresentation-buttons a {
width: 230px;
height: 58px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
}
<div id="apresentation-box">
<div id="border-background"></div>
<div id="apresentation-text">
<span id="foundation-date">
Desde 2012
</span>
<p>
FICAREMOS <span>FELIZES</span> EM DESENVOLVER DE SUA ARTE
</p>
</div>
<div id="apresentation-buttons">
<a href="#"
style="background-color: orange; border: 2px solid white; color: rgb(54, 59, 65);">
Contate-nos
<i class="material-icons" style="margin-left: 5px;">arrow_forward</i>
</a>
<a href="#"
style="background-color: rgb(54, 59, 65); border: 2px solid white; color: white;">
Peça um orçamento
<i class="material-icons" style="margin-left: 5px;">arrow_forward</i>
</a>
</div>
</div>