"Justify-content: space-between;" is not working - Flexbox

Asked

Viewed 34 times

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

1 answer

0


Good afternoon!

I scanned my code again and found that the error was in height of div#apresentation-buttons. I put more than necessary space.
In this way, space-between is working perfectly. It was just a size control error, which I made.

Thank you!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.