CSS-Flex Box: Wie vertikal ausrichten "flex-items" Mitte-ohne flex-Element Höhe?

Derzeit meine "flex" - Elemente wie folgt Aussehen (vertikale Ausrichtung: top)...

 _____________________________________
   1

 _____________________________________
   2

 _____________________________________
   3

 _____________________________________
   4

 _____________________________________

Mein Ziel ist, dass Sie Aussehen wie diese (vertikale Ausrichtung: Mitte)...

 _____________________________________

   1
 _____________________________________

   2
 _____________________________________

   3
 _____________________________________

   4
 _____________________________________

Meine Anforderungen:

  • Die flex-container bleiben muss, bei 100% in der Höhe
  • Die flex-items bleiben müssen 25% in der Höhe (entspricht 100%, das ist die Standard-sowieso).
  • Die flex-Elemente müssen vertikal zentriert werden.
  • Diese müssen schnell und intelligent genug, um in der Mitte zu bleiben, - pro Gerät (also kein line-height/padding)

http://jsfiddle.net/oneeezy/p4XtA/

HTML

<!-- Flex Box -->
<section>

    <!-- Flex Items -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

</section>

CSS

/* Flex Box */
section { padding: 1em; background: black; display: flex; flex-flow: column; height: 100%; justify-content: space-around; }

/* Flex Items */
div { border-top: 1px solid #ccc; background: #f2f2f2; height: 25%; }
div:first-child { border-top: 1px solid transparent; }
div:hover { background: white; }
InformationsquelleAutor Oneezy | 2014-05-03
  1. 3

    Vielleicht bin ich Missverständnis, aber kann Sie gerade nicht tun:

    HTML (Slim)

    .container
  .item 1
  .item 2
  .item 3
  .item 4

    CSS

    .container {
  display:flex;
  flex-direction: column;
  height: 100vh;
}
.item {
  flex-grow: 1;
  display:flex; 
  align-items:center;
  border-bottom:2px solid #e8e288;
}

    Hier ein Codepen

    • dies ist eleganter als die anderen hacks 🙂
    • Jahre später, das ist definitiv das, was ich suchte lol.. Danke für deine Antwort
    InformationsquelleAutor skube
  2. 9

    Vertikalen ausrichten Inhalte der flexbox Kind, müssen Sie einige andere Techniken.

    Ich glaube, es wird Inhalt , verpackt in den tag, können Sie dann wieder verwenden flex und untergeordnete in margin:auto;
    DEMO

    CSS-aktualisiert :

    /* Flex Box */
 section {
    padding: 1em;
    background: black;
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: space-around;
}
/* Flex Items */
 div {
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    height: 25%;
    display:flex;/* be a flexbox too */
}
div:first-child {
    border-top: 1px solid transparent;
}
div:hover {
    background: white;
}
p { /* or any child of flex box used */
    margin:auto;/* here center/middle align */
}

    HTML-Struktur :

    <!-- Flex Box -->
<section>
    <!-- Flex Items , Flex Box themselves -->
    <div>
        <p style="width:100%;/* to fill entire width*/">1</p> <!-- Flex Items  -->
    </div>
    <div>
        <p>2</p><!-- Flex Items  -->
    </div>
    <div>
        <p>3</p><!-- Flex Items  -->
    </div>
    <div>
        <p>4</p><!-- Flex Items  -->
    </div>
</section>

    Vielleicht ein fallback mit display:table , kann nützlich sein : DEMO 2

    /* fall back IE8 ie */
html, body, section {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    height:100%;
    width:100%;
}
section {
    display:table;
}
section > div {
    display:table-cell;
    vertical-align:middle;
}

/* Flex Box */
 section {
    padding: 1em;
    background: black;
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: space-around;
}
/* Flex Items */
 section > div {
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    height: 25%;
    display:flex;
}
section > div:first-child {
    border-top: 1px solid transparent;
}
section > div:hover {
    background: white;
}
p {
    margin:auto;
}
    • Sie sind herzlich Willkommen. flex ist sehr schön, es muss noch falbacks. hier display:table/table-cell machen würde für einen start in älteren browser jsfiddle.net/p4XtA/5
    • ja, ich bin einverstanden. Ich dachte eigentlich über versucht, mein grid-system, um für eine fallback-aber kommen Sie, daran zu denken-Tabellen (obwohl es tötet mich, dies zu sagen) wäre das der perfekte fallback-Lösung für die flexbox. Ausgezeichnete Arbeit, mein Freund.
    • scheint, Sie können auch entfernen, Höhe: 25% von Abschnitt " > div und ersetzen mit flex: 1; und das wird Sie teilen sich gleichmäßig.
    • genau 🙂 so 🙂
    InformationsquelleAutor G-Cyr
  3. 3

    Dein problem ist nicht wirklich im Zusammenhang mit der so genannten flex-box, in der Tat, was Sie ausrichten möchten, ist die Inhalt des div - (nicht die div), so dass nur einige trick auszurichten normarlly. Hier ist einer der tricks:

    div:before {
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

    Demo.

    • Tricky! Aber immer noch ein bisschen ein hack - ich beklage mich nicht, ich denke, es ist genial.. aber ich könnte mir vorstellen, Flex-Box haben würde, etwas zu kontrollieren, diese Art der Sache?
    • Es ist kein hack, es ist CSS 🙂 Für flexox Kind, benutzen Sie einfach margin:auto;
    • touche` haha.... aber im ernst, obwohl. Die Macher von flex nicht etwas für diese? Ich habe versucht, verwenden Sie "flex-Methoden" für ein paar Tage jetzt und bekommen haben in der Nähe, aber keine Zigarre
    • natürlich kann es nur die flex-Element, aber nicht innere Inhalt des flex-Element.
    InformationsquelleAutor King King
  4. 1

    Dies ist die Flex-Weg von der Lösung Ihres Problems:

    HTML

    <div style="height:300px;"> <!-- Just to test/change the height of <section> element -->
<!-- Flex Box -->
<section>
    <!-- Flex Items -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

</section>
</div>

    CSS

    /* Flex Box */
section {
    padding: 1em;
    background: black;
    display: flex;
    flex-flow: column;
    height:100%;
    justify-content: space-around;
}

/* Flex Items */
/* Child selector(>) is used to select <div> elements inside <section> element*/
section > div {
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    height: 25%;

    /* Added code */
    display: flex;       /* Gives inner div flex display */
    align-items: center; /* Centers the div in the cross axis */
    /**************/
}
section > div:first-child {
    border-top: 1px solid transparent;
}
section > div:hover {
    background: white;
}
    InformationsquelleAutor Barun
Schreibe einen Kommentar