Festlegen einer maximalen Breite für Flex-Elemente?

Lesezeit: 3 Minuten

Benutzeravatar von knock loose
losgeschlagen

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 denke, es wäre besser, nicht über “schwebende” Elemente zu sprechen, es sei denn, Sie meinen tatsächlich das Festlegen von Eigenschaften float auf einen nicht standardmäßigen Wert. Es scheint, dass es bei dieser Frage stattdessen um Ausrichtung oder Rechtfertigung ging.

    – Mikko Rantalainen

    23. November um 12:05 Uhr

Benutzeravatar von Johannes
Johannes

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>

  • Hat ein wenig gezwickt, aber das funktioniert perfekt, danke für die Hilfe!

    – losgeschlagen

    8. Dezember 2017 um 15:15 Uhr

  • Gern geschehen! Übrigens: Es ist nicht nötig, alle Flex-Einstellungen vorzunehmen .child, also habe ich sie aus dem Snippet oben gelöscht. Sie sind flexibel Artikel automatisch (indem ihr Container als Flex-Container definiert wird)

    – Johannes

    8. Dezember 2017 um 15:21 Uhr


  • Ja, die stammen aus unserem globalen Styleguide, also kann ich sie nicht wirklich entfernen, aber ich weiß den Einblick zu schätzen. Ich habe nie wirklich mit Flex-Items gearbeitet, bis wir dieses Projekt gestartet haben, also sind sie irgendwie verwirrend!

    – losgeschlagen

    8. Dezember 2017 um 15:23 Uhr

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

  • Dies ist eine schlechte Lösung, wenn man bedenkt, dass später Änderungen an den Artikeln vorgenommen werden können. Das Platzieren von Artikeln mit Rand führt immer zu Störungen.

    – burakarslan

    2. Dezember um 7:18

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;
  }

1437130cookie-checkFestlegen einer maximalen Breite für Flex-Elemente?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy