All geek questions in one place

How to make flexible elements vertically rather than horizontally?

I am trying to make two elements displayed vertically. This should work, but on firefox 21 elements are displayed horizontally.

Does anyone know why and how to fix it?

<!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>
+6
source share
1 answer

You are mixing syntaxes. You have included flexbox with the old syntax (which Firefox currently supports), but you are trying to make them vertical with the new syntax.

You need to use -moz-box-orient: vertical;

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

http://jsfiddle.net/TPf3P/

Firefox will use the latest syntax soon (no prefix), so you should enable it too. This syntax will also work in IE11, Opera, and Chrome (with the -webkit-prefix prefix in this case).

You must also add the old syntax with the -webkit prefix for it to work in Safari. IE10 also supports a slightly different syntax:

  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/

+7
source

Source: https://habr.com/ru/post/946236/

More articles:


All Articles