CSS justify-content: space-between with multiple lists in a div-CodePudding

I am trying to achieve a result like this. However, I can't seem to get justify-content to work on the lists in a div.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 80px;
  align-items: center;
  justify-content: space-between;
}

.container ul {
  padding: 0;
}


/* added by community */

ul {
  background: pink;
}

ul li {
  list-style-type: none;
}

ul img {
  height: 40px;
}

<div >
  <ul>
    <li style="opacity: 0;">s</li>
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1200px-2021_Facebook_icon.svg.png" ></li>
  </ul>
  <ul>
    <li style="opacity: 0;">s</li>
    <li>
      <p >facebook.com</p>
    </li>
  </ul>
  <ul>
    <li>
      <h1 >Brugernavn</h1>
    </li>
    <li>
      <p >lucas.ortega</p>
    </li>
  </ul>
  <ul>
    <li>
      <h1 >Password</h1>
    </li>
    <li>
      <p >asdkfjl</p>
    </li>
  </ul>
</div>

However, this is my result

CodePudding user response：

I suspect you have an outer wrapper or container element that is limiting the size of your container div. Try adding some min-width values in the parent containers. The CSS is pretty close, but you would achieve the desired spacing better with justify-content: flex start; and a gap value. I fear you may receive some down votes because of the semantics of your markup (the two H1 tags, for example), the inline styles, and so on.

CodePudding user response：

Is it absolutely necessary to use lists?

I've recreated the example above using divs.

Lists have a lot of styles that need to be overwritten in order to work in the way you'd like them to.

.container {
  display: flex;
  width: 100vw;
  align-items: flex-end;
  justify-content: space-between;
  font-family: "Helvetica";
}

.container > div {
  width: 30%
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}

.logo > img {
  width: 2.5vw;
  aspect-ratio: 1/1;
}

.div-bottom {
  font-size: 1.2rem;
}

.pass_overskrift {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

 {
  font-size: 1.3rem;
}

.div-top {
  font-size: 0.75rem;
}

<div >
  <div >
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1200px-2021_Facebook_icon.svg.png"  />
    <div >facebook.com</div>
  </div>
  <div >
    <div >Brugernavn</div>
    <div >lucas.ortega</div>
  </div>
  <div >
    <div >Password</div>
    <div >••••••••</div>
  </div>
</div>

CodePudding user response：

You can just drop all the ul'elements, and instead use divs for each "section", like this:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.container div {
  display: flex;
  flex-direction: column;
  flex-basis: 200px;
  padding: 10px;
}

.container .website_logo {
  width: 30px;
  flex-direction: row;
  padding-right: 10px;
  align-items: end;
}

.small {
  font-size: 10px;
  text-transform: uppercase;
}

<div >

    <div >
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1200px-2021_Facebook_icon.svg.png" >
      <span>facebook.com</span>
    </div>

    <div>
      <span >Brugernavn</span>
      <span>lucas.ortega</span>
    </div>

    <div>
      <span >Password</span>
      <span>asdkfjl</span>
    </div>
    
</div>