Kevin Powell - Community•11mo ago

Flexbox- flex-start 1 element, but space the rest?

How would this be done? just out of curiosity.. I'm messing around with a page and I basically want the top nav-bar to have 1 element in the top left corner, but then the other element to space out between the rest of the section, if that makes sense? "this is a random..." should appear in the middle(ish)

3 Replies

CDLOP•11mo ago

EDIT: I can have it space out nicely if I have a minimum of 3 elements, but if I only have 2, how would I accomplish this?

MarkBoots•11mo ago

with flex you can give that second elemtent a margin-inline: auto

<header>
  <div class="logo">CDL</div>
  <div class="text">Some text</div>
</header>

<header>
  <div class="logo">CDL</div>
  <div class="text">Some text</div>
</header>

header {
  display: flex;
  .text{
    margin-inline: auto
  }
}

header {
  display: flex;
  .text{
    margin-inline: auto
  }
}

CDLOP•11mo ago

Great, thanks Mark!

Gaming

Programming

Flexbox- flex-start 1 element, but space the rest?