CSS: Flexbox-Container mit Top & Center ausgerichtet divs

Ich versuche, ein Layout mit oberen und Mitte ausgerichtet div s zu erstellen.CSS: Flexbox-Container mit Top & Center ausgerichtet divs

es funktioniert, irgendwie: https://jsfiddle.net/zeo29uLa/

<div class="flexbox-container"> 
    <div class="top-item"> 
    top 
    </div> 
    <div class="center-item"> 
    center 
    </div> 
</div> 

<style> 
    body { 
    height: 50vh; 
    } 
    .top-item { 
    flex: 1 0 100%; 
    text-align: center; 
    align-self: flex-start; 
    } 
    .center-item { 
    align-self: center; 
    } 
    .flexbox-container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 

    justify-content: center; 
    height: 100%; 
    flex-wrap: wrap; 
    } 
</style>

Mein Problem und somit Frage: Wie genau das in der Mitte Zentrum div align machen? Zur Zeit gibt es Raum darüber < => es richtet unterhalb der gewünschten Höhe

Ich habe das Gefühl, dass diese über die korrekte Verwendung von align-content in den übergeordneten Container sein wird, aber ich kann nicht scheinen, um herauszufinden.

Quelle

2017-09-21 B M

Sie können Position die top-item als absolute und dann align-content: center zum Flexbox Container hinzufügen - Demo unten:

body { 
 
    height: 50vh; 
 
    background: blue; 
 
    } 
 
    .top-item { 
 
    flex: 1 0 100%; 
 
    text-align: center; 
 
    align-self: flex-start; 
 
    position: absolute; /* ADDED */ 
 
    } 
 
    .center-item { 
 
    align-self: center; 
 
    } 
 
    .flexbox-container { 
 
    display: flex; 
 
    background: green; 
 
    justify-content: center; 
 
    height: 100%; 
 
    flex-wrap: wrap; 
 
    align-content: center; /* ADDED */ 
 
    position: relative; /* ADDED */ 
 
    }

<div class="flexbox-container"> 
 
    <div class="top-item"> 
 
    top 
 
    </div> 
 
    <div class="center-item"> 
 
    center 
 
    </div> 
 
</div>

Quelle

2017-09-21 17:05:27 kukkuz

Vielen Dank für Ihre Lösung! Ich bin erstaunt, wie fehlerhaft dieser ganze Flexbox-Standard immer noch ist - das ist eine absolut grundlegende Art der Positionierung und das Endergebnis ist: Es ist nicht mit Flexbox möglich. Entweder musst du es so machen, wie du es gezeigt hast oder du zeigst es in der Duplikatsfrage und benutzt versteckte Elemente - was ein wirklich hässlicher Hack ist. –

@BM, Eigentlich ist es nicht wirklich ein Fehler in der Flexbox. Sie möchten nur, dass flexbox etwas tut, für das es nicht vorgesehen ist. Flexbox richtet Objekte über die Verteilung von Speicherplatz im Container aus. Bei unebenem Raum ist die Ausrichtung ungleichmäßig. So einfach ist das. –

Wenn Sie nach einer sauberen Lösung suchen, dann funktioniert CSS Grid gut: https://jsfiddle.net/zeo29uLa/2/ –

CSS: Flexbox-Container mit Top & Center ausgerichtet divs

Antwort

Verwandte Themen