Flexbox doesn't work with buttons

Problem

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/

Problem courtesy of: Bae

Solution

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%;
}
Solution courtesy of: cimmanon

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.