CODEWITHSUNDEEP
htmlcssflexbox
jollyjwhiskers
jollyjwhiskers

Reputation: 431

Move element to the right with Flexbox

Basically, I'm trying to move my hamburger menu div to the right side of the page with Flexbox, but it refuses to budge. I've tried the flex-start/flex-end stuff, I've tried margin-right/left auto, but it doesn't seem to work.

The only thing that makes it work is if I put in a fix left margin, but when the screen size shrinks, it basically pushes the logo off the screen.

What's wrong with my code?

/*Parent Element*/

#nav-bar {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
}


/*Children*/

#logo {
  flex: 2;
  justify-self: flex-start;
  max-width: 6em;
  margin-right: auto;
}

#mobile-nav {
  flex: 1;
  justify-self: flex-end;
  margin-left: auto;
}
<div id="nav-bar">
  <div id="logo"><img src="./img/logo.png" alt=""> </div>
  <div id="mobile-nav">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <ul id="main-nav">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li><a href="''" class="btn">CTA</a></li>
  </ul>
</div>

Upvotes: 1

Views: 5846

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371193

Flex auto margins work by consuming free space in the direction of the margin. For example, margin-right: auto consumes all free space to the right of the element. This has the effect of pinning the element and siblings on its left all the way to the left, while pinning siblings to its right all the way to the right.

The problem in your code is that you have flex-grow (via the flex shorthand property). Well, flex-grow, like auto margins, works by consuming free space. Since flex-grow distributes all free space on the line, there is nothing auto margins can do (there is no free space available for them to use).

The justify-content property also works through distribution of free space, and will be useless when flex-grow is in play.

Solution: remove flex-grow.

Here's a more detailed explanation with illustrations:

Upvotes: 1

3Demon
3Demon

Reputation: 550

This is how I would do it.

#nav-bar{
 display: flex;
 flex-flow: row;
 width: 100%;
 justify-content: space-between;
}

#logo{}

#mobile-nav{}

Upvotes: 2

Related Questions