Centrare verticalmente gli articoli con la flexbox

Question

Sto provando a centrare verticalmente gli articoli con la flexbox CSS; e, so come farlo con il codice prefissato non-vendor, ma anche con i prefissi del venditore non riesco a farlo funzionare in Webkit (Chrome).

Sto provando ad allineare verticalmente gli span in #trigger.

Ecco il mio CSS:

#trigger{ 
    /* 2009 syntax */ 
    display: -webkit-box; 
    display: box; 
    /* current syntax */ 
    display: -webkit-flex; 
    display: flex; 
} 

#trigger span{ 
    /* 2009 syntax */ 
    -webkit-box-align: center; 
    /* current syntax */ 
    -webkit-align-items: center; 
    flex-align: center; 
} 

Tutte le idee che sto facendo male?

E se si conoscono gli altri prefissi/versioni dei proprietari delle proprietà che sto utilizzando, sentitevi liberi di condividerli in modo che possano funzionare in più di un semplice Webkit.

Answer 1

La proprietà align-items è per contenitori flex (elementi con display: flex applicati ad essi), non articoli flex (bambini di contenitori flex). Le vecchie specifiche del 2009 non hanno una proprietà paragonabile a align-items; la proprietà box-align dal 2009 corrisponde a align-content dalle specifiche standard.

http://jsfiddle.net/mnM5j/2/

#trigger { 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
    text-align: center; 
    height: 10em; 
    background: yellow; 
} 

<div id="trigger"> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span> 
</div> 

Answer 2

Un layout allineati verticalmente può essere raggiunto con le seguenti proprietà, si prega di notare che questa è utilizzando la vecchia sintassi, anche se ho testato su ultime versioni di Chrome, Firefox & Firefox Aurora -

#trigger { 
    width: 200px; 
    height: 200px; 

    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 

    display: -moz-box; 
    -moz-box-orient: vertical; 
    -moz-box-pack: center; 
    -moz-box-align: center; 

    display: box; 
    box-orient: vertical; 
    box-pack: center; 
    box-align: center; 
} 

#trigger span { 
    display: block; 
} 

box-orient specifica come devono essere allineati i bambini della scatola, che nel nostro caso è verticale.

box-pack allinea i bambini lungo l'asse di orientamento casella.

box-align allinea i bambini all'interno della scatola, il suo asse è perpendicolare all'asse del rettangolo, cioè nel nostro caso poiché l'orientamento della scatola è verticale, deciderà l'allineamento dei bambini orizzontalmente.

Ecco uno Codepen demonstration, le proprietà che ho applicato su elementi di campata diverso da display: block sono puramente per scopi cosmetici.