Justify-content: space-between doesn't appear to be working in a flexbox-CodePudding

I have tried changing a bunch of things in the CSS with classes and id's, but nothing seems to make it so that both images will be on the far side of the screen (logo on the far left and profile on the far right).

Tried lots of different things like text-align and different justify-contents but nothing appears to work.

Here is the code:

.top-nav {
  display: flex;
  position: absolute;
  background-color: blue;
  opacity: 0.5;
  height: 10%;
  top: 0;
  width: 100%;
  left: 0;
  padding: 0;
  border: 0;
  margin: 0;
  list-style: none;
}

.top-nav div {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin: 0px;
  padding: 0;
  border: 0;
  margin: 0;
}

<div >
  <div style="flex-grow: 1"><img src="/textures/logo.svg"></div>
  <div style="flex-grow: 1"><img src="/textures/profile.svg"></div>
</div>

CodePudding user response：

justify-content right now does nothing, because it's set on a div that doesn't have display:flex on it. If you want want the divs with images separeted, then put the justify-content:space-between on the div that has them i.e. the top-nav div.

CodePudding user response：

The obvious answer is that you set the flex-items the top-nav div elements – the parents of the <img> elements – to expand to fill the availlable space; this means the <div> elements fill that space, and the <img> elements are aligned via the default text-align for the language defined by your browser.

Instead you could either remove the <div> elements, as they do little to help and bloat the HTML for no reason, and specify justify-content: space-between on the .top-nav element:

.top-nav {
  display: flex;
  background-color: blue;
  justify-content: space-between;
}

<div >
  <img src="https://placekitten.com/300">
  <img src="https://via.placeholder.com/300">
</div>

Or, you could either retain the <div> elements and simply omit the flex-grow statement:

.top-nav {
  display: flex;
  background-color: blue;
  justify-content: space-between;
}

<div >
  <div><img src="https://placekitten.com/300"></div>
  <div><img src="https://via.placeholder.com/300"></div>
</div>

Or simply use text-align on those <div> elements:

.top-nav {
  display: flex;
  background-color: blue;
  justify-content: space-between;
}

.top-nav div:first-child {
  text-align: left;
}

.top-nav div:last-child {
  text-align: right;
}

<div >
  <div><img src="https://placekitten.com/300"></div>
  <div><img src="https://via.placeholder.com/300"></div>
</div>

References:

CodePudding user response：

Looking for a result similar to this?

.top-nav {
  display: flex;
  position: absolute;
  background-color: blue;
  opacity: 0.5;
  height: 10%;
  top: 0;
  width: 100%;
  left: 0;
  padding: 0;
  border: 0;
  margin: 0;
  list-style: none;
}

.top-nav .brand {
  margin-right: auto; /* Push element to the left*/
}

.top-nav .profile {
  margin-left: auto; /* Push element to the right */
  text-align: right;
}

<div >
  <div >
    <img src="/textures/logo.svg">
  </div>
  <div >
    <img src="/textures/profile.svg">
  </div>
</div>