flexbox-vertikal geteilte container in HALBE

Kann jemand sagen wie kann ich rechts oben container und rechts unten - container haben die gleiche Höhe und die Spaltung des roten Behälter 50-50% vertikal. Egal, was ist der Inhalt im inneren. Ich versuchte, stretching Inhalt und habe Sie gewickelt, während flex-direction: row zu halten gleiche Höhe für Elemente, aber ich bin verloren.

Was ich erwarte: rechts oben container wächst der gleichen Höhe wie rechts unten, die auch die Ergebnisse der Links container wächst automatisch natürlich.
flexbox-vertikal geteilte container in HALBE

Dies ist, was ich habe, so weit: http://jsbin.com/rozoxoneki/edit?html,css-Ausgabe

.flex{
  display: flex;
  border: 5px solid red;
  &-child{
    background: green;
    border: 2px solid yellow;
    flex: 1;
  }
}

.flex--vertical{
  flex-direction: row;
  flex-wrap: wrap;

  > .flex-child{
    min-width: 100%;
  }
}


<div class="flex">
  <div class="flex-child">
    left
  </div>
  <div class="flex-child flex flex--vertical">
    <div class="flex-child">
      <h1>right top</h1>
    </div>
    <div class="flex-child">
      <h1>right bottom</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
    </div>
  </div>
</div>
  • Im Grunde, können Sie nicht...das ist nicht der Weg flexbox funktioniert. Sie können die Boxen zunächst der gleiche Größe, aber sobald Inhalte Hinzugefügt wird, dann wird der flexy Teil der flexbox kommt in den Ort.
InformationsquelleAutor zsitro | 2016-04-12
  1. 12

    Intuitiv würde man erwarten, dass das funktionieren würde, nur mit einer flex-direction: column für den main-container und den linken container die Höhe auf 100% gesetzt.

    Stattdessen alle browser so machen: (das ist ein Zitat aus einem anderen stackoverflow-Frage)

    Wie ist es möglich, dass alle gängigen Browser hab die flex-container
    erweitern wickeln Sie Sie in Zeilen-Richtung, aber nicht in Spalten-Richtung?

    Also, was Sie tun können, ist, wickeln Sie die beiden rechten Behälter in ein neues

    Wie das HTML - schema:

    <div class="main-container">
    <div class="left-container">Left container</div>
    <div class="right-container">
        <div class="half-containers">Top right</div>
        <div class="half-containers">Bottom right</div>
    </div>
</div>

    Hier ist ein jsfiddle als ein Beispiel, wie könnte man es Stil für das erwartete Ergebnis.

    In diesem Beispiel die 'main-container' auf 50% Breite und 75% der Höhe des Körpers.

    • Danke, aber es verhält sich ähnlich wie mein Beispiel. Fügen Sie mehr text in einen der Container auf der rechten Seite. Es werden lose 50/50% Verteilung
    • Das max-height: 50% für die Hälfte-Container funktioniert in Firefox aber nicht in Chrome. Ein weiterer Ansatz ist, um die Richtung für die richtigen container zu den Zeilen mit Eintrag in den breiten von 100%, wickeln Sie Sie und explizit Einstellung jeder Höhe bis zu 50%. Ich aktualisiert die Fiedel über. Es funktioniert in Firefox, Chrome und IE. (IE muss max-width auf jeder Position - im Falle dass Sie sich Wundern, warum es da ist)
    InformationsquelleAutor michaPau
  2. 6

    Die akzeptierte Antwort ist nicht ideal für die Verwendung von flex-Eigenschaften, denn es kann alles getan werden, ohne die Notwendigkeit für min-height oder max-height

    Habe ich gereinigt, bis die Beispiel fiddle und entfernt nicht wesentlicher css-Stile zu zeigen, die flex-Eigenschaften sind hier.

    Um gleichmäßig oben/unten divs, müssen Sie entweder geben Sie den richtigen Wert für flex-basis oder lassen Sie flex-arbeiten selbst aus. Unter der Annahme, dass die Eltern die Anzeige eingestellt ist flex mit einer Spalte Orientierung, die kombinierten flex Stil können wir es leicht:

    .half-containers {
    flex: 1;
}

    sehen Sie mehr auf flex styling und die flex-basis Eigenschaft

    • sollte die Antwort sein
    InformationsquelleAutor Felipe
  3. 0

    Bauen auf Felipe ' s Antwort, hier ist sogar noch eine weitere minimal-Beispiel, wie man eine split-single flex-container in der Mitte vertikal. Jeder dieser Stile hat bestätigt wichtig und notwendig, mit Ausnahme der zwei an der Unterseite markiert optional.

    (Was mir war, dass jedes übergeordnete element muss ein height: 100% setzen, oder die ganze Sache bricht.)

    HTML

    <div id="container">
  <div class="row">This is the top.</div>
  <div class="row">This is the bottom.</div>
</div>

    CSS

    html, body {
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  flex: 1;
}

/* optional: get rid of body margin. makes look nice. */
body {
  margin: 0;
}

/* optional: shade the bottom row */
.row:nth-child(2) {
  background: #bbb
}

    Arbeiten CodePen hier:

    https://codepen.io/rbrtmrtn/pen/NyxeJE

    InformationsquelleAutor Rob
Schreibe einen Kommentar