Как сделать гибкие элементы вертикально, а не горизонтально?

Я пытаюсь сделать 2 элемента отображения по вертикали. Это должно работать, но на firefox 21 элементы отображаются горизонтально.Как сделать гибкие элементы вертикально, а не горизонтально?

Любой знает, почему и как его исправить?

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

источник

2013-05-31 Steve H

Вы смешиваете синтаксисы. Вы включили flexbox со старым синтаксисом (который в настоящее время поддерживает Firefox), но вы пытаетесь сделать их вертикальными с новым синтаксисом.

Вы должны использовать -moz-box-orient: vertical;

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

http://jsfiddle.net/TPf3P/

Firefox скоро будет использовать последний синтаксис (без префикса), так что вы должны включать в себя, что тоже. Этот синтаксис также будет работать в IE11, Opera и Chrome (с префиксом -webkit в этом случае).

Вы также должны добавить старый синтаксис с префиксом -webkit, чтобы он работал в Safari. IE10 также поддерживает несколько иной синтаксис:

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/

источник

2013-05-31 06:02:19

Ого, у меня ушел час, чтобы выследить 'Flex-direction' поддержки для каждого браузера. Спасибо, это работает отлично. – JacobTheDev

Почему вы не использовали box-orient: vertical ;? – confile

Спасибо! Вы также можете использовать [autoprefixer] (https://github.com/postcss/autoprefixer). –

Как сделать гибкие элементы вертикально, а не горизонтально?

ответ

Смежные вопросы