Positionierung div unten links mit flexbox

Ich habe Schwierigkeiten, ein Element in der unteren linken Ecke zu positionieren, wenn ich eine Flexbox benutze. Im Wesentlichen versuche ich, den Welttext direkt unter dem Hallo-Text erscheinen zu lassen (dh die untere linke Ecke der Flexbox).Positionierung div unten links mit flexbox

rel { 
 
    position: relative; 
 
    background: rgba(255, 0, 0, 0.5); 
 
    padding: 5px; 
 
    margin-top: auto; 
 
} 
 
abs { 
 
    position: absolute; 
 
    background: rgba(0, 255, 0, 0.5); 
 
    padding: 5px; 
 
} 
 
column { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
item { 
 
    display: flex; 
 
    align-items: center; 
 
    flex: auto; 
 
    border: 1px solid blue; 
 
}

<column> 
 
    <item> 
 
    hello 
 
    <br>hello 
 
    <br>hello 
 
    <br>hello 
 
    <br> 
 
    <rel> 
 
     <abs> 
 
     world 
 
     <br/>world 
 
     <br/>world 
 
     <br/>world 
 
     <br/> 
 
     </abs> 
 
    </rel> 
 
    </item> 
 
</column>

Quelle

2016-11-20 Robbie

wie [das] (https://jsfiddle.net/c5cbxw9q/1/)? – pol

Dies kann helfen: http://StackOverflow.com/a/33856609/3597276 –

Ist das, was nach der du bist? Was ich gemacht habe, war item Anzeige als Flex-Spalte auch, die zusätzliche Elemente darunter als Spalte fallen lassen. Auch align-items: flex-start; zu column hinzugefügt, so dass sie richtig ausgerichtet sind. Sie können die Positionseigenschaften auch entfernen, da sie nicht benötigt werden.

Live Demo on jsfiddle, snippet below.

CSS Änderungen

column { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
} 

item { 
    display: flex; 
    align-items: center; 
    flex: auto; 
    flex-direction: column; 
    border: 1px solid blue; 
}

Snippet

rel{ 
 
    background:rgba(255,0,0,0.5); 
 
    padding:5px; 
 
} 
 

 
abs{ 
 
    background:rgba(0,255,0,0.5); 
 
    padding:5px; 
 
} 
 

 
column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 

 
item { 
 
    display: flex; 
 
    align-items: center; 
 
    flex: auto; 
 
    flex-direction: column; 
 
    border: 1px solid blue; 
 
}

<column> 
 
\t <item> 
 
\t \t hello<br> 
 
\t \t hello<br> 
 
\t \t hello<br> 
 
\t \t hello<br> 
 
\t \t <rel> 
 
\t \t \t <abs> 
 
\t \t \t \t world<br/> 
 
\t \t \t \t world<br/> 
 
\t \t \t \t world<br/> 
 
\t \t \t \t world<br/> 
 
\t \t \t </abs> 
 
\t \t </rel> 
 
\t </item> 
 
</column>

Quelle

2016-11-20 03:30:04 Loktar

Während dies das gewünschte Ergebnis erzielt, brauche ich die absolute Positionierung, da die "Welten" über anderem Text liegen und den Inhalt nicht stören sollen. – Robbie

@Robbie so etwas wie das? https://jsfiddle.net/c5cbxw9q/3/ wo du einfach 'absolute' zurück hinzufügst? – Loktar

Ja, ich dachte nicht einmal, dass das Ganze jetzt relativ zu der Flex-Box ist, also war alles, was man brauchte, um den relativen zu einem absoluten zu ändern. – Robbie

Fügen Sie zum item Tag hinzu. Auch das Entfernen der Polsterung passt perfekt zu den Kanten. Das ist der direkte Container, der alle Elemente enthält. Sie können auch die absoluten und relativen Positionen entfernen.

rel { 
 
    background: rgba(255, 0, 0, 0.5); 
 
    padding: 5px; 
 
} 
 
abs { 
 
    background: rgba(0, 255, 0, 0.5); 
 
} 
 
column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
} 
 
item { 
 
    display: flex; 
 
    align-items: center; 
 
    flex: auto; 
 
    flex-direction: column; 
 
    border: 1px solid blue; 
 
}

<column> 
 
    <item> 
 
    hello 
 
    <br>hello 
 
    <br>hello 
 
    <br>hello 
 
    <br> 
 
    <rel> 
 
     <abs> 
 
     world 
 
     <br/>world 
 
     <br/>world 
 
     <br/>world 
 
     <br/> 
 
     </abs> 
 
    </rel> 
 
    </item> 
 
</column>

Quelle

2016-11-20 03:31:36

Positionierung div unten links mit flexbox

Antwort

Verwandte Themen