Flexbox-Säule richtet sich nach unten aus

Ich versuche, Flexbox zu verwenden. http://css-tricks.com/almanac/properties/a/align-content/ das zeigt schöne Ausrichtungsoptionen; aber ich würde eigentlich eine Top-Top-Bottom-Situation wollen.Flexbox-Säule richtet sich nach unten aus

Ich möchte ein Div mit flexbox an der Unterseite des Elternteil div bleiben. Mit flex-direction: column und align-content: Space-between kann ich dies tun, aber das mittlere div wird in der Mitte ausrichten, ich möchte die mittlere auch an die Spitze geklebt werden.

[top]

[Mitte]

[unten]

align-self: flex-end wird es richtig, nicht unten machen schweben.

komplette Flexbox docs: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Quelle

2014-07-11 Laurens Kling

[Diese Seite könnte helfen] (http://the-echoplex.net/flexyboxes/?fixed-height=on&legacy=on&display=flex&flex-direction=column&flex-wrap=nowrap&justify-content=flex-start&align-items=center&align -content = dehnen & bestellen% 5B% 5D = 0 & flex-wachsen% 5B% 5D = 0 & flex-verkleinern% 5B% 5D = 1 & flex-Basis% 5B% 5D = 200px & ausrichten-self% 5B% 5D = automatisch & Auftrag% 5B% 5D = 0 & flex-grow % 5B% 5D = 0 & Flex-Shrink% 5B% 5D = 1 & Flex-Basis% 5B% 5D = 100% 25 & Align-Self% 5B% 5D = Auto & Auftrag% 5B% 5D = 0 & Flex-Grow% 5B% 5D = 0 & Flex-Shrink% 5B % 5D = 1 & flex-basis% 5B% 5D = 200px & Ausrichtung-self% 5B% 5D = auto). – misterManSam

Tangential zu der Frage, aber es scheint absurd, dass diese Art von Layout nicht einfach durch eine der Flex-Box-Eigenschaften gelöst werden kann – coffeecola

@coffeecola nicht sagen, es ist nicht einfach zu lösen, wenn Sie das Wissen nicht haben. Flex ist wirklich mächtig, Danke, überprüfe meine Antwort unten. – T04435

ich meine eigene Lösung gefunden, ich es hier für die Dokumentation Wert wird;

Wenn Sie den mittleren Block height: 100% geben, nimmt er den Raum in der Mitte auf. Der untere Block befindet sich also unten und oben und die Mitte oben.

UPDATE: Dies funktioniert nicht für Chrome ...

UPDATE: einen Weg gefunden, die für die FF/Chrome funktioniert: Einstellung Flex-wachsen auf einer höheren Zahl (1 genügt) für [Mitte] wird Lass es volle mittlere Größe nehmen. Weitere Informationen: http://css-tricks.com/almanac/properties/f/flex-grow/

Quelle

2014-07-14 09:31:48

Ich folge deiner Antwort nicht, aber dies ist das genaue Problem, mit dem ich gerade Probleme habe. Können Sie Ihr tatsächliches Markup und CSS für die Lösung verwenden? – corradomatt

ich werde versuchen, es bald zu veröffentlichen, irgendwelche pro stackoverflow Tipps? Füge ich es in meine Frage ein? –

Verwenden von 'flex-grow: 1;' funktioniert in IE11 – philk

Ich bin ein bisschen spät, um die Partei, sondern könnten relevant sein für andere, das Gleiche zu erreichen versuchen sollten Sie tun können:

margin-top: auto

auf das Element in Frage, und es sollte auf den Boden gehen. Sollte den Trick für Firefox, Chrom und Safari tun.

Quelle

2016-02-01 07:41:36

Ja, um ein Element bis zum Ende zu drücken, wird dies den Trick machen. Flexbox behandelt Margin ein wenig anders –

Das hat Trick für mich nach ein paar Stunden WTF getan. Es funktioniert auch in IE (11 sowieso, ich muss noch in anderer Version testen) –

Kann jemand bitte erklären, warum es funktioniert? – PlusA

Grundsätzlich ist die Antwort auf die letzte der mittleren Elemente ein flex wachsen 1-Code zu geben, wie folgt:

.middle-last{ 
    flex-grow: 1; // assuming none of the other have flex-grow set 
}

Danke, T04435.

Quelle

2017-01-19 07:35:32 T04435

Flexbox-Säule richtet sich nach unten aus

Antwort

Verwandte Themen