Come rendere gli elementi flessibili visualizzati verticalmente anziché orizzontalmente?

Sto cercando di visualizzare 2 elementi in verticale. Questo dovrebbe funzionare, ma su firefox 21 gli elementi appaiono orizzontalmente.Come rendere gli elementi flessibili visualizzati verticalmente anziché orizzontalmente?

Qualcuno sa perché e come risolverlo?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div 
{ 
    width: 50%; 
    display: -moz-box; 
    -moz-flex-direction: column; 
}  
#p1 
{ 
    border:1px solid red; 
}  
#p2 
{ 
    border:1px solid blue; 
} 
</style> 
</head> 
<body>  
<div> 
<div id="p1">item1</div> 
<div id="p2">item2</div> 
</div> 
</body> 
</html>

fonte

2013-05-31 Steve H

Si stanno mixando le sintassi. Hai attivato la flexbox con la vecchia sintassi (che è attualmente supportata da Firefox), ma provi a renderli verticali con la nuova sintassi.

è necessario utilizzare -moz-box-orient: vertical;

div { 
    width: 50%; 
    display: -moz-box; 
    -moz-box-orient: vertical; 
}

http://jsfiddle.net/TPf3P/

Firefox sarà presto utilizzare l'ultima sintassi (senza prefisso), così si dovrebbe includere anche questo. Questa sintassi funzionerà anche in IE11, Opera e Chrome (con prefisso -webkit- in questo caso).

È inoltre necessario aggiungere la vecchia sintassi con prefisso -webkit, in modo che funzioni in Safari. IE10 supporta anche una sintassi leggermente diversa:

display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column;

http://jsfiddle.net/TPf3P/1/

fonte

2013-05-31 06:02:19

Wow, mi ci sono voluti ore per rintracciare 'supporto flex-direction' per tutti i browser. Grazie, funziona perfettamente. – JacobTheDev

Perché non hai usato il box-orient: verticale ;? – confile

Grazie! Puoi anche usare [autoprefixer] (https://github.com/postcss/autoprefixer). –

Come rendere gli elementi flessibili visualizzati verticalmente anziché orizzontalmente?

risposta

Problemi correlati