Jak sprawić, by elementy flex były wyświetlane w pionie zamiast w poziomie?

Próbuję wyświetlić 2 elementy w pionie. To ma działać, ale na firefoxie 21 elementy pojawiają się poziomo.Jak sprawić, by elementy flex były wyświetlane w pionie zamiast w poziomie?

Każdy wie, dlaczego i jak to naprawić?

<!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>

Źródło

2013-05-31 Steve H

Miksujesz składnie. Włączyłeś Flexbox ze starą składnią (jest to aktualnie obsługiwane przez Firefoksa), ale starasz się uczynić je pionowymi dzięki nowej składni.

Trzeba użyć -moz-box-orient: vertical;

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

http://jsfiddle.net/TPf3P/

Firefox wkrótce używać najnowszej składni (bez prefiksu), więc należy to, że zbyt. Ta składnia będzie działać również w IE11, Operze i Chrome (w tym przypadku z prefiksem -webkit-).

Powinieneś również dodać starą składnię z prefiksem -webkit, aby działała w Safari. IE10 obsługuje także nieco inną składnię:

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/

Źródło

2013-05-31 06:02:19

Wow, zajęło mi godzin wyśledzić 'flex-direction' wsparcie dla każdej przeglądarki. Dzięki, to działa idealnie. – JacobTheDev

Dlaczego nie używasz box-orient: vertical? – confile

Dzięki! Możesz również użyć [autoprefixer] (https://github.com/postcss/autoprefixer). –

Jak sprawić, by elementy flex były wyświetlane w pionie zamiast w poziomie?

Odpowiedz

Powiązane problemy