Problem beim vertikalen Zentrieren mit der Flexbox, wenn die Höhen unbekannt sind

Question 1

Mein Layout hat einen Container flex-containerund ein Kind.

HTML:

<div class="flex-container">
  <div>text</div>
</div>

Der Behälter und das Kind haben eine unbekannte Höhe . Und das Ziel ist:

Wenn das Kind eine geringere Höhe als der Behälter hat, erscheint es horizontal und vertikal zentriert.
Wenn das Kind eine größere Höhe als der Container hat, passt es sich oben und unten an und wir können scrollen.

Planen: Geben Sie hier die Bildbeschreibung ein

Der schnellste Weg zum Zentrieren eines Elements mit Flexbox ist der folgende:

Code-Snippet anzeigen

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Erweitern Sie das Snippet

Codepen: http://www.codepen.io/ces/pen/slicw

Wenn das Kind des Containers jedoch eine größere Höhe hat, wird das Kind nicht richtig angezeigt. Das Kind erscheint geschnitten (nur der obere Teil).

Code-Snippet anzeigen

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  align-items: center; // vertical
  justify-content: center; // horizontal
  
  width: 100%;
  height: 100px;
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Erweitern Sie das Snippet

Codepen: http://www.codepen.io/ces/pen/sGtfK

Planen:

Geben Sie hier die Bildbeschreibung ein

Gibt es eine Möglichkeit, dieses Problem zu beheben?

Question 2

Ich habe die Lösung gefunden:

.flex-container {
    display: flex; /* only */
    overflow-y: scroll;
}

.flex-container > div {
    margin: auto; /* horizontal and vertical align */
}

Code-Snippet anzeigen

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.flex-container {
    display: flex;
    width: 100%;
    height: 100px; /* change height to 300px */
    overflow-y: scroll;
    background: #2a4;
}

.flex-container > div {
    padding: 1em 1.5em;
    margin: auto;
    background: #E77E23;
    width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Erweitern Sie das Snippet

Codepen: http://codepen.io/ces/pen/Idklh

Question 3

Add align-self:flex-start;to .flex-container > divkann auch dieses Problem beheben.

Siehe: http://www.w3.org/TR/css-flexbox-1/#auto-margins

Answer 1

Mein Layout hat einen Container flex-containerund ein Kind.

HTML:

<div class="flex-container">
  <div>text</div>
</div>

Der Behälter und das Kind haben eine unbekannte Höhe . Und das Ziel ist:

Wenn das Kind eine geringere Höhe als der Behälter hat, erscheint es horizontal und vertikal zentriert.
Wenn das Kind eine größere Höhe als der Container hat, passt es sich oben und unten an und wir können scrollen.

Planen: Geben Sie hier die Bildbeschreibung ein

Der schnellste Weg zum Zentrieren eines Elements mit Flexbox ist der folgende:

Code-Snippet anzeigen

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Erweitern Sie das Snippet

Codepen: http://www.codepen.io/ces/pen/slicw

Wenn das Kind des Containers jedoch eine größere Höhe hat, wird das Kind nicht richtig angezeigt. Das Kind erscheint geschnitten (nur der obere Teil).

Code-Snippet anzeigen

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  align-items: center; // vertical
  justify-content: center; // horizontal
  
  width: 100%;
  height: 100px;
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Erweitern Sie das Snippet

Codepen: http://www.codepen.io/ces/pen/sGtfK

Planen:

Geben Sie hier die Bildbeschreibung ein

Gibt es eine Möglichkeit, dieses Problem zu beheben?

Answer 2

138

Ich habe die Lösung gefunden:

.flex-container {
    display: flex; /* only */
    overflow-y: scroll;
}

.flex-container > div {
    margin: auto; /* horizontal and vertical align */
}

Code-Snippet anzeigen

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.flex-container {
    display: flex;
    width: 100%;
    height: 100px; /* change height to 300px */
    overflow-y: scroll;
    background: #2a4;
}

.flex-container > div {
    padding: 1em 1.5em;
    margin: auto;
    background: #E77E23;
    width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Erweitern Sie das Snippet

Codepen: http://codepen.io/ces/pen/Idklh

cespon
quelle

11

Ich wünschte, ich könnte dies mehr als einmal positiv bewerten - es ist nicht nur nützlich, es ist auch sehr gut kommuniziert, danke.

Hier .flex-containerhat der Anfangswert align-items: flex-start(dh oben).

Sam

1

Ich habe schon lange versucht, eine Antwort darauf zu finden! Dankeschön.

CT5845

Gute Lösung, aber gibt es ein Warum?

Jiyinyiyong

3

@jiyinyiyong - hier sind einige Details zum "Warum?" ... stackoverflow.com/a/33455342/3597276

Michael Benjamin

Answer 3

11

Ich wünschte, ich könnte dies mehr als einmal positiv bewerten - es ist nicht nur nützlich, es ist auch sehr gut kommuniziert, danke.

Answer 4

Hier .flex-containerhat der Anfangswert align-items: flex-start(dh oben).

Sam

Answer 5

1

Ich habe schon lange versucht, eine Antwort darauf zu finden! Dankeschön.

CT5845

Answer 6

Gute Lösung, aber gibt es ein Warum?

Jiyinyiyong

Answer 7

3

@jiyinyiyong - hier sind einige Details zum "Warum?" ... stackoverflow.com/a/33455342/3597276

Michael Benjamin

Answer 8

-1

Add align-self:flex-start;to .flex-container > divkann auch dieses Problem beheben.

Siehe: http://www.w3.org/TR/css-flexbox-1/#auto-margins

iwege
quelle

1

Dies beantwortet die Frage, anstatt eine Problemumgehung bereitzustellen, wie dies bei der akzeptierten Antwort der Fall ist. +1

RienNeVaPlu͢s

8

Ihre Lösung besteht einfach darin, die Zentrierungsanforderung zu ignorieren. Wenn eine Zentrierung nicht notwendig wäre, gäbe es natürlich kein Problem.

Michael Benjamin

3

Dies ist nicht die richtige Antwort, da die vertikale Zentrierung ignoriert wird. Es ist also keine Lösung.

Ranzwertig

Answer 9

1

Dies beantwortet die Frage, anstatt eine Problemumgehung bereitzustellen, wie dies bei der akzeptierten Antwort der Fall ist. +1

RienNeVaPlu͢s

Answer 10

8

Ihre Lösung besteht einfach darin, die Zentrierungsanforderung zu ignorieren. Wenn eine Zentrierung nicht notwendig wäre, gäbe es natürlich kein Problem.

Michael Benjamin

Answer 11

3

Dies ist nicht die richtige Antwort, da die vertikale Zentrierung ignoriert wird. Es ist also keine Lösung.

Ranzwertig

Problem beim vertikalen Zentrieren mit der Flexbox, wenn die Höhen unbekannt sind

Antworten: