html - Flexbox doesn't work with buttons

Question

I want to use flex box model in my html

I have a div container with three buttons inside.

<div id="viewport" class="linearlayout horizontal" data-am-control="vertical-layout" >  
    <!-- El div "container_buttons" estaría centrado en el medio del padre -->      
    <button id="twitter" class="btn item" data-am-control="button" >Twitter dinámico</button>
    <button id="spinnerSimple" class="btn item" data-am-control="button" >Spinner simple</button>
    <button id="spinnerCustom" class="btn item" data-am-control="button" >Spinner personalizado</button>
</div><!-- END VIEWPORT-->

I use display: box and orientation: vertical...but i see my buttons inline insted of vertical..

My problem is with all browsers.

Css is this:

#viewport{
width: 480px;
height: 800px;
background-image: linear-gradient(#a8a8a8, #ebebeb);
margin: 0 auto;
}

.linearlayout{
display: -webkit-box; 
display: -moz-box; 
display: box;

}

.horizontal{
-webkit-box-orient: horizontal; 
-moz-box-orient: horizontal; 
box-orient: horizontal;
}

.vertical{
-webkit-box-orient: vertical; 
-moz-box-orient: vertical; 
box-orient: vertical;
}

http://jsfiddle.net/adUD9/

Answer 1

You have a few things working against you.

1. You're only using the legacy properties from the 2009 draft, which not every browser has an implementation of. IE10 is the first IE browser to support Flexbox, and it implemented the March 2012 draft. Every other browser has an implementation of either the 2009 draft or the standard draft, and some have both.

2. Webkit's 2009 Flexbox implementation just doesn't work on buttons. If you add other sibling elements, they'll be placed vertically as you would expect. Chrome has both the 2009 and standard implementation, but Safari, Android, iOS only have the 2009 implementation.

You can fix #1 by using the correct collection of properties, but there's nothing you can do about #2 for Webkit browsers that only support the 2009 properties.

http://jsfiddle.net/adUD9/3/

.linearlayout {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.horizontal {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

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

If all you want is to make your buttons display vertically, I would recommend not using Flexbox for this purpose:

http://jsfiddle.net/adUD9/1/

button {
    display: block;
    width: 100%;
}