Festlegen einer maximalen Breite für Flex-Elemente?

Ich versuche, einen Filterbereich auf meiner Website zu erstellen, der Inhalt wird alle dynamisch generiert (daher kann ich keine zusätzlichen Eltern hinzufügen), und unser Styleguide erstellt sie mithilfe von Flex-Elementen. Diese Funktionalität möchte ich größtenteils beibehalten.

Ich möchte, dass meine 3 Flex-Elemente eine haben max-width und nach links schweben, wobei mein Nicht-Flex-Element nach rechts schwebend gelassen wird, in dem Gesamtcontainer, der auf eine maximale Breite von eingestellt ist 1080px ungefähr so:

Option 1    Option 2    Option 3                                    Non-flex Item

Ich habe versucht, die Flex-Align-Werte festzulegen und dieser Antwort zu folgen, aber das scheint dafür nicht zu funktionieren.

Ab sofort ist dies der Code, mit dem ich arbeite:

<ul class="container">
   <li class="child">One</li>
   <li class="child">Three</li>
   <li class="child">Three</li>
   <div class="non-flex">
       I'm not a flex item
   </div>
</ul>

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: content-box;
}
        
.child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
}

Ich habe auch eine gemacht Geige damit ihr alle herumspielen könnt.

Ich würde a anwenden width oder min-width zum .child Elemente (oder linke/rechte Polsterung, die den Abstand zwischen ihnen erzeugt) und margin-left: auto zum letzten Element, das es unabhängig von den anderen nach rechts verschiebt:

https://jsfiddle.net/6vwny6bz/2/

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
}

.child {
  list-style: none;
  min-width: 80px;
  padding: 10px 0;
}

.non-flex {
  margin-left: auto;
  padding: 10px 0;
}

<ul class="container">
  <li class="child">One</li>
  <li class="child">Three</li>
  <li class="child">Three</li>
  <div class="non-flex">
    I'm not a flex item
  </div>
</ul>

Eine einfache Lösung ist das Setzen von margin-right:auto:

margin-right: auto;

Du könntest benutzen:

.non-flex{
  margin-left: 50%;
}

um mehr Platz zwischen den ersten 3 Elementen und dem nicht-flexiblen Element zu schaffen

Das Hinzufügen einer flexiblen Spanne zwischen Ihren Listenobjekten ist sehr hilfreich. https://jsfiddle.net/cd9car5k/1/

Damit

<ul class="container">
  <li class="child">One</li>
  <li class="child">Three</li>
  <li class="child">Three</li>
  <span class="example-spacer"></span>
  <div class="non-flex">
   I'm not a flex item
  </div>
</ul>

wo:

.example-spacer {
    flex: 1 1 auto;
  }