Colonna Flexbox allineare auto verso il basso

Sto cercando di utilizzare Flexbox. http://css-tricks.com/almanac/properties/a/align-content/ mostra delle belle opzioni di allineamento; ma vorrei davvero una situazione Top-top-bottom.Colonna Flexbox allineare auto verso il basso

Voglio un div per attaccare alla parte inferiore del div padre utilizzando la flexbox. Con flex-direction: column e align-content: Space-between posso farlo, ma il centro di mezzo si allineerà al centro, voglio che anche il primo sia attaccato in alto.

[top]

[centrale]

[basso]

align-self: flex-end farà galleggiare giusto, non in basso.

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

fonte

2014-07-11 Laurens Kling

[Questo sito potrebbe aiutare] (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 -contenuto = stirata & ordine% 5B% 5D = 0 e flex-crescere% 5B% 5D = 0 e flex-shrink% 5B% 5D = 1 &% flex-base 5B% 5D = 200px e allineare sé% 5B% 5D = auto e ordine% 5B% 5D = 0 e flex-crescere % 5B% 5D = 0 e flex-shrink% 5B% 5D = 1 &% 5B% 5D = 100% 25 e allineare sé% 5B% 5D = auto e ordine% 5B% 5D = 0 e flex-crescere% 5B% 5D = 0 e flex-shrink% 5B flex-base % 5D = 1 & flex-base% 5B% 5D = 200px e allineare-self% 5B% 5D = auto). – misterManSam

Tangenziale alla domanda, ma sembra assurdo che questo tipo di layout non sia facilmente risolto da nessuna delle proprietà flex-box – coffeecola

@coffeecola non dire che non è facile da risolvere quando non si ha la conoscenza. Flex è davvero potente, grazie controlla la mia risposta qui sotto. – T04435

ho trovato la mia soluzione, lo aggiungerò qui per il valore di documentazione;

Se si dà il blocco intermedio height: 100% occuperà tutta la stanza nel mezzo. Quindi il blocco in basso sarà sul fondo effettivo e in alto e in mezzo sono in alto.

UPDATE: Questo non funziona per Chrome ...

UPDATE: Hai trovato un modo che funziona per FF/Chrome: regolazione Flex-crescere su un numero più alto (1 è sufficiente) per [mezzo] sarà fallo prendere a grandezza media. maggiori info: http://css-tricks.com/almanac/properties/f/flex-grow/

fonte

2014-07-14 09:31:48

Non seguo la tua risposta, ma questo è esattamente il problema con cui sto avendo problemi. Potresti condividere il tuo markup e CSS usati per la soluzione? – corradomatt

proverò a postare presto, eventuali suggerimenti pro stackoverflow? Lo aggiungo alla mia domanda? –

Uso di 'flex-grow: 1;' funziona in IE11 – philk

Sono un po 'in ritardo alla festa, ma potrebbero essere rilevanti per gli altri cercando di realizzare lo stesso si dovrebbe essere in grado di fare:

margin-top: auto

sull'elemento in questione e dovrebbe andare in fondo. Dovrebbe fare il trucco per Firefox, Chrome e Safari.

fonte

2016-02-01 07:41:36

Sì, per spingere un elemento alla fine, questo farà il trucco. Flexbox considera margin un po 'diverso –

Questo ha fatto un trucco per me dopo un paio d'ore di WTF. Funziona anche su IE (11 comunque, devo ancora provare in un'altra versione) –

Qualcuno può spiegare perché funziona? – PlusA

In sostanza, la risposta è di dare l'ultimo degli elementi centrali un flex crescere 1 codice come segue:

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

Grazie, T04435.

fonte

2017-01-19 07:35:32 T04435

Colonna Flexbox allineare auto verso il basso

risposta

Problemi correlati