Flex Container and child container with justify end and start

Question

I'm having an issue with my header, on the .container element when I apply flex the child flex-justify doesn't work, but when I remove it I can't align them center.

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: white;
}

header {
    background: inherit;
    border-bottom: 1px solid var(--border);
    padding: 1rem 0rem;
    background: pink;
}

/*
Remove the flex to preview
*/

header .container{
  display: flex;
  align-items: center;
}

.right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: green;

}

.left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: red;
}

<header>
        <div class="container">
            <div class="logo left">
                <a href="#">
                  MYLOGO(IMG)
                </a>
            </div>
            <nav class="right">
                <a class="nav-link" href="">
                    NAV ITEM
                </a>
                <a class="nav-link" href="">
                    NAV ITEM
                </a>
                <a class="nav-link" href="">
                    NAV ITEM
                </a>
                <a class="nav-link" href="">
                    NAV ITEM
                </a>
            </nav>
        </div>
    </header>

So basically I want a container with flex to align center and its child one justify end and one right.

score 1 · Answer 1 · answered May 22 '21 at 03:50

Simply do this:

header .container {
      display: flex;
      align-items: center;
      justify-content: space-between; 
      /* this will put the logo.left at the left and .right at the right */
    }

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: white;
}

header {
    background: inherit;
    border-bottom: 1px solid var(--border);
    padding: 1rem 0rem;
    background: pink;
}

/*
Remove the flex to preview
*/

header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: green;

}

.left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: red;
}

<header>
        <div class="container">
            <div class="logo left">
                <a href="#">
                  MYLOGO(IMG)
                </a>
            </div>
            <nav class="right">
                <a class="nav-link" href="">
                    NAV ITEM
                </a>
                <a class="nav-link" href="">
                    NAV ITEM
                </a>
                <a class="nav-link" href="">
                    NAV ITEM
                </a>
                <a class="nav-link" href="">
                    NAV ITEM
                </a>
            </nav>
        </div>
    </header>

It doesn't work, maybe because i'm using bootstrap .container — , May 22 '21 at 04:00
When i only add that, it spaces between but with a kind of padding on the right , left side — , May 22 '21 at 04:01
I think this may help if you are using bootstrap https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment — Its Fragilis, May 22 '21 at 04:04

score 0 · Answer 2 · answered May 22 '21 at 04:05

@Its Fragilis recommended that I add display flex and justify space around, but because I was using bootstrap it showed some margin on the bottom and left. to fix that you need to add this code:

.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after{
content: none !important;
}

Flex Container and child container with justify end and start

2 Answers2