Question 44539 in Html Question posted in
Some basic documentation can be found here.

Why won't justify-content:space-between; work? – Html

The items just stay to the left instead of spreading out. Also, I’m using Google Icons, and the icons won’t show up unless I’m using the base tag in the head section (the domain name isn’t registered); is this normal? My browser is Microsoft Edge.

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Brain Archive</title>
  <meta charset="UTF-8">
  <base href="https://www.brainarchive.com/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="brain_archive.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>

<body>
  <header>
    <span>Brain Archive</span>
    <span>
        <span class="material-symbols-outlined">search</span>
    <span class="material-symbols-outlined">menu</span>
    </span>
  </header>
  <main>
  </main>
</body>

</html>
Tags:

3

Answers


  1. 0

    Seems to work perfectly. "Brain Archive" is on the left, and the icons are on the right.

    header {
  display: flex; 
  justify-content: space-between;
  width: 100%;
}
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <header>
      <span>Brain Archive</span>
      <span>
        <span class="material-symbols-outlined">search</span>
        <span class="material-symbols-outlined">menu</span>
      </span>
    </header>
    Login or Signup to reply.
  2. 0 
    Make the Parent Span tag us, Div Tag.
 <header>
      <div>Brain Archive</div>
      <div>
        <span class="material-symbols-outlined">search</span>
        <span class="material-symbols-outlined">menu</span>
      </div>
    </header>
    Login or Signup to reply.
  3. 0

    This is a slight alteration to @BrettDonald answer – the icons are also spread evenly.

    This is achieved by setting their span parent to display:contents which tells flex to include the children of that element.

    header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

header span:last-child {
  display: contents;
}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<header>
  <span>Brain Archive</span>
  <span>
        <span class="material-symbols-outlined">search</span>
  <span class="material-symbols-outlined">menu</span>
  </span>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search