Search code examples
htmlcssflexboxjustify

Can I Left justify and Center justify two objects inside the same flex container?

I have a flex-container(row), where Im looking for the first object to be left justified at a static width, and then for the next object to be centered and fill the remainder of the container.

[ (obj1) | <----------(obj2)---------> ]

I know that I could accomplish this easier with the grid styling below, but my goal here is to educate myself in flex.

display:grid; grid-template-columns: 100px 1fr;

Thanks!

Solution

  • Please see the code snippets for the flex implementation.

    .wrapper {
  display: flex;
}

.obj-a {
  background: lime;
  flex-basis: 100px;
}
.obj-b {
  background: skyblue;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
    <div class="wrapper">
  <div class="obj-a">obj-a</div>
  <div class="obj-b">obj-b</div>
</div>