Halten Sie die mittlere Element zentriert, wenn die Seite Elemente haben unterschiedliche breiten

Halten Sie die mittlere Element zentriert, wenn die Seite Elemente haben unterschiedliche breiten

Stellen Sie sich das folgende layout, wo die Punkte stehen für den Raum zwischen den Boxen:

[Left box]......[Center box]......[Right box]

Wenn ich entfernen die Rechte box, wie ich die center-box noch in der Mitte, etwa so:

[Left box]......[Center box].................

Das gleiche gilt für, wenn ich das entfernen würde die linke box.

................[Center box].................

Nun, wenn die Inhalte innerhalb der center-box wird länger, wird es dauern, bis so viel Platz wie nötig und dennoch zentriert. Die linke und Rechte box wird nie schrumpfen und damit, wenn, wo nicht genügend Platz die overflow:hidden und text-overflow: ellipsis wird kommen in Kraft zu brechen, den Inhalt;

[Left box][Center boxxxxxxxxxxxxx][Right box]

Alle der oben genannten ist meine ideale situation ist, aber ich habe keine Ahnung, wie das zu erreichen ist dieser Effekt. Denn wenn ich erstellen Sie eine flex-Struktur etwa so:

.parent {
    display : flex; //flex box
    justify-content : space-between; //horizontal alignment
    align-content   : center; //vertical alignment
}

Wenn die linke und Rechte box wäre genau die gleiche Größe, bekomme ich den gewünschten Effekt. Wenn jedoch eine der beiden aus einer unterschiedlichen Größe der zentrierten box ist nicht wirklich zentriert mehr.

Gibt es jemanden, der mir helfen kann?

Update

Einen justify-self wäre schön, das wäre ideal:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}
Im Grunde...das können Sie nicht. Das ist nicht, wie flexbox funktionieren soll. Sie könnten versuchen, eine andere Methodik.
Würde wirklich komplett flexbox, wenn es ihn tho. Ursache flexbox ist alles über die Verteilung von Raum und wie sich die Elemente Verhalten sich innerhalb.
Wir diskutierten justify-self heute früher, so dass Sie könnte dies interessant finden: stackoverflow.com/questions/32551291/...
Gute Frage, und upvote für die Verwendung des GIF-insbesondere auch.

InformationsquelleAutor Mark | 2015-09-03

  1. 1

    Anstelle des standardmäßig zur Verwendung von flexbox, mit raster löst es in 2 Zeilen CSS-ohne zusätzliche markup innerhalb der top-level-Kinder.

    HTML:

    <header class="header">
  <div class="left">variable content</div>
  <div class="middle">variable content</div>
  <div class="right">variable content which happens to be very long</div>
</header>

    CSS:

    .header {
  display: grid;
  grid-template-columns: [first] 20% auto [last] 20%;
}
.middle {
  /* use either */
  margin: 0 auto;
  /* or */
  text-align: center;
}

    Flexbox-Felsen aber nicht die Antwort für alles. In diesem Fall grid ist eindeutig die sauberste option.

    Sogar ein codepen für Ihre Prüfung Vergnügen:
    https://codepen.io/anon/pen/mooQOV

    +1 für die Zulassung, dass es andere Optionen als flex für alles. Meine einzige Einwand ist, dass die vertikale Ausrichtung wird leichter mit flex ( align-items: center ), falls Ihre Elemente sind unterschiedlich hoch und müssen ausgerichtet werden

    InformationsquelleAutor Johan

Schreibe einen Kommentar