How to push elements to end of flexbox without changing their width

Question

I am placing some spans inside mat-toolbar which by default has display flex. Now I want some of the items on the extreme right. I use margin-left: auto for these elements. The problem is that these elements are stretched in order to fill the entire flexbox. What I want is some elements, followed by empty space, followed by the elements with margin-left: auto having their width as fit-content.

What I want :

What I'm getting:

This is my code:

HTML:

<div>
  <span>Flex item</span>
  <span class="right">Flex item</span>
  <span class="right">Flex item</span>
</div>

CSS:

div {
     display: flex;
     border: 1px dotted black;
        }
        
.right { margin-left: auto; }

span {
  background-color: #E0E0E0;
  border: solid 1px black;
  padding: 10px
}

its not clear what do you want it to look like, can you append an img? — Matan Sanbira, Jul 05 '22 at 11:31
Without your HTML and CSS, your (expected) "*[mcve]*" code, it's hard to really offer a practical solution that doesn't involve guessing; also linking to your code elsewhere isn't a substitute for posting your (again: minimal) code here in the question. — David Thomas, Jul 05 '22 at 11:47

score -1 · Answer 1 · answered Jul 05 '22 at 11:54

Based on what you said, I understood you wanted something like this...
Using flexbox is the correct way to achieve it, but you must add some properties to make it style the way you want.

Use:

justify-content: space-between to align the items into the extremes (left and right);
align-items: center to align vertically to the center, your information on HTML.
Create 2 divs to align both divs to the extremes.

Here is the example:

body {
  margin: 0px;
}

div {
  box-sizing: border-box;
}

.toolbar {
  background-color: blue;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: white;
  padding: 0px 10px;
}

.start-items {
  display: flex;
  gap: 15px;
}

.multiple-items {
  display: flex;
  gap: 15px;
}

<div class="toolbar">
  <div class="start-items">
    <h5>
      Start Item1
    </h5>
    <h5>
      Start Item2
    </h5>
  </div>
  <div class="multiple-items">
    <h5>
      Item1
    </h5>
    <h5>
      Item2
    </h5>
    <h5>
      Item3
    </h5>
  </div>
</div>

How to push elements to end of flexbox without changing their width

1 Answers1