Problem with flexbox

Question

Problem with flexbox

Asked 5 years, 10 months ago

Viewed 429 times

0

My intention initially was to divide the header in 2 so that one part remained on the left and the other on the right. Then I put a flex-start and a flex-end, but it didn’t work out.

I’m trying to learn Flexbox and I think it’s something simple, but I’m not getting at the moment.

My code:

* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;

}
body {
    font-family: 'Dosis', sans-serif;
    background-color: #363636;
}
.head {
    font-family: 'Staatliches', cursive;
    padding-top: .5rem;
    font-size: 3rem;
    font-weight: 200;
    padding-right: 1rem;
    color: white;
}
.container {
    display: flex;
    flex-direction: row;
    font-size: 1.5rem;
}
/* as classes das 2 divs*/
.esquerda {
    justify-content: flex-start;
}
.direita {
    justify-content: flex-end;
}
ul {
    display: inline-flex;
    list-style-type: none;
}
li {
    color: white;
    cursor: pointer;
    padding: 1.5rem 3rem;
}
li:hover {
    transition: all .2s ease-out;
    background-color: #454545;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/styles.css">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">

        <title>Manytestsbudda</title>
    </head>
    <body>
        <header>
            <div class="container">
                <div class="esquerda">
                    <ul>
                        <h1 class="head">MKY</h1>
                        <li>Home</li>
                        <li>Planos</li>
                    </ul>
                </div>
                <div  class="direita">
                    <ul>
                        <li>Contato</li>
                    </ul>
                </div>
            </div>
        </header>
    </body>
</html>

Replica of the code available on Codepen.io.

2 answers

3

It didn’t work because justify-content is a property for you to use in a flex container, is a property used in container parent and not directly in the child elements within the container like you did.

Here we enter one of the darkest parts of display:flex... You might think... "so I’ll use the justify-self to individually align each child of the container. But that won’t work either. Because justify-self only applies in display:grid, not in the display:flex. Other than align-self, that works both ways! You can read more about it in the official W3C documentation: https://www.w3.org/TR/css-align-3/#Justify-self-property

Then the solution to align one on each side is using margin. That’s right margin-left: auto; in the second son will cause him of a margin that occupies all available space on his left, this will "nail" him on the right. Simple like this...

* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;

}
body {
    font-family: 'Dosis', sans-serif;
    background-color: #363636;
}
.head {
    font-family: 'Staatliches', cursive;
    padding-top: .5rem;
    font-size: 3rem;
    font-weight: 200;
    padding-right: 1rem;
    color: white;
}
.container {
    display: flex;
    flex-direction: row;
    font-size: 1.5rem;
}
/* as classes das 2 divs*/
.esquerda {
    /* justify-content: flex-start; */
}
.direita {
    /* justify-content: flex-end; */
    margin-left: auto;
}
ul {
    display: inline-flex;
    list-style-type: none;
}
li {
    color: white;
    cursor: pointer;
    padding: 1.5rem 3rem;
}
li:hover {
    transition: all .2s ease-out;
    background-color: #454545;
}

<header>
    <div class="container">
        <div class="esquerda">
            <ul>
                <h1 class="head">MKY</h1>
                <li>Home</li>
                <li>Planos</li>
            </ul>
        </div>
        <div  class="direita">
            <ul>
                <li>Contato</li>
            </ul>
        </div>
    </div>
</header>

Browser other questions tagged html5 css3 flexbox

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

by LipESprY • **4,525** points · Answer 1 · 2019-01-10T06:53:34+00:00

See if that’s what you need:

* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;

}
body {
    font-family: 'Dosis', sans-serif;
    background-color: #363636;
}
.head {
    font-family: 'Staatliches', cursive;
    padding-top: .5rem;
    font-size: 3rem;
    font-weight: 200;
    padding-right: 1rem;
    color: white;
}
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 1.5rem;
}
ul {
    display: inline-flex;
    list-style-type: none;
}
li {
    color: white;
    cursor: pointer;
    padding: 1.5rem 3rem;
}
li:hover {
    transition: all .2s ease-out;
    background-color: #454545;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/styles.css">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">

        <title>Manytestsbudda</title>
    </head>
    <body>
        <header>
            <div class="container">
                <div class="esquerda">
                    <ul>
                        <h1 class="head">MKY</h1>
                        <li>Home</li>
                        <li>Planos</li>
                    </ul>
                </div>
                <div  class="direita">
                    <ul>
                        <li>Contato</li>
                    </ul>
                </div>
            </div>
        </header>
    </body>
</html>

I added the style justify-content: space-between; in the .container and I took the class styles .esquerda and .direita, that are not necessary and were being misused.

"- I’m trying to learn Flexbox".

May I suggest an excellent article. With illustrations that make it easier when you are codando one Flexbox:

CSS-Tricks - A Complete Guide to Flexbox (in English, but easy to understand).