-1

I have a flex container:

<div class="breadcrumb">
    <span class="breadcrumb-item  ">
      <a href="#">Reports</a>
    </span>
     <span class="breadcrumb-item  ">
      <a href="#">Some really really long name1</a>
    </span>
    <span class="breadcrumb-item  ">
      <a href="#">Some really long name2</a>
    </span>
    <span class="breadcrumb-item  ">
      <a href="#">Some really long name3</a>
    </span>
</div>

The styles:

.breadcrumb {
    margin-left: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

Here's my plunker. I'd like to remove extra space between the items in flex container and align them left, currently for smaller screens it looks like this:

enter image description here

I'd appreciate any help!

Gyuzal
  • 1,581
  • 10
  • 52
  • 99
  • 1
    They _are_ aligned to the left, same as they were on a wider viewport where they all still fit without anything breaking into multiple lines. Add `span { outline: 1px solid red; }` for debugging purposes, and you'll see that this extra space is actually contained _inside_ those spans. And that is actually a problem that can't be fixed easily - https://stackoverflow.com/q/34995740/1427878, https://stackoverflow.com/q/37406353/1427878 – CBroe Sep 01 '23 at 13:35

1 Answers1

0

If I'm getting what you want to achieve, then you set both of these by yourself in the style. Just change the gap and the margin-left to 0. It would look something like this:

    .breadcrumb {
      margin-left: 0;
      display: flex;
      align-items: left;
      gap:0;
    }

The elements are aligned left by default.

Tubica
  • 11
  • 2