Wie vertikal ausrichten und Strecken Sie Inhalte mit CSS flexbox

Mit CSS flexbox, wie kann ich gleichzeitig vertikal zentrieren den Inhalt aller divs in einer Zeile unter Beibehaltung der gleichen Höhe auf allen von Ihnen, ohne Verwendung der css - height Attribut?

Details — http://jsbin.com/efaCEVa/1/edit

mögliche Duplikate von vertikal-Center-Elemente mit flexbox
dies ist kein Duplikat, siehe dieses Beispiel: jsbin.com/efaCEVa/1/edit
stackoverflow.com/questions/28929635/...

InformationsquelleAutor Stephen | 2013-09-28

  1. 7

    HTML -

    <div class='outer'>
    <div class='inner'>A</div>
    <div class='inner'>B</div>
    <div class='inner'>C</div>
</div>

    CSS

    .outer {
    align-items: stretch;
    display: flex;
}

.inner {
    align-items: center;
    display: flex;
}

    InformationsquelleAutor Ben

  2. 2
      .item-wrapper
    display: flex
    align-items: stretch
    justify-content: center

  .item
    width: 400px
    display: flex

    InformationsquelleAutor GN.

  3. 0

    Gibt es keinen Grund, dies zu tun mit Flexbox. Die Tabelle/Tabelle-Zelle Eigenschaften in der Lage gewesen, dies zu tun für eine lange Zeit:

    http://cssdeck.com/labs/qsirepkh

    ul {
  display: table; /* optional */
}

li {
  display: table-cell;
  vertical-align: middle;
}

    Dies ist, was es sieht aus wie mit Flexbox:

    http://codepen.io/cimmanon/pen/BfDAk

    ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
    Ich möchte es in flexbox, weil ich will auch die Inhalte zu teilen gleichmäßig in der gesamten Breite der Seite
    Es ist schön, beide Möglichkeiten. Würde ich entfernen Sie den ersten Satz der Antwort : "Es gibt keinen Grund, dies zu tun mit Flexbox.". Einige von uns haben sprang die vollwertige flexbox-Ansatz-Behälter.
    Viel viel besser, nehmen Sie die Zeit zu lernen, flexbox statt mit alten Techniken wie dieses. Auch der einzige Grund, dass die flexbox-Vergleich ist, lange ist, weil cimmanon schrieb die browser-Präfixe, die css-Präprozessoren übernehmen diese.
    Generiert ich dies mit einem CSS-Präprozessor. Es gibt keinen Vorteil zu bewegen, um die glänzende, wenn die alten Techniken sind perfekt geeignet, um die Aufgabe, breitere browser-Unterstützung (und weniger bugs), und am Ende in Höhe von weniger code am Ende.
    warum zeigen Sie den code nachbearbeiten? es macht es Aussehen mehr einschüchternd, niemand würde jemals schreiben alle, dass aus. Deine Lösung funktioniert perfekt, ich bin damit einverstanden, aber alles was ich Vorschlage, ist, zu lernen, flexbox, das ist unglaublich kraftvoll und löst so viele Situationen, die erfordern Kreisverkehr css-hacks.

    InformationsquelleAutor cimmanon

Schreibe einen Kommentar