html - Flexbox 不适用于按钮

Question

我想在我的 html 中使用 flex box 模型

我有一个 div 容器，里面有三个按钮。

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

我使用 display: box 和 orientation: vertical...但是我看到我的按钮内联而不是垂直..

我的问题是所有浏览器。

CSS 是这样的:

#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

有些事情对您不利。

1. 您仅使用 2009 草案中的遗留属性，并非每个浏览器都有实现。 IE10 是第一个支持 Flexbox 的 IE 浏览器，它实现了 2012 年 3 月的草案。所有其他浏览器都实现了 2009 草案或标准草案，有些浏览器两者都有。

2. Webkit 的 2009 Flexbox 实现不适用于按钮。如果您添加其他同级元素，它们将按照您的预期垂直放置。 Chrome 有 2009 和标准实现，但 Safari、Android、iOS 只有 2009 实现。

您可以通过使用正确的属性集合来修复#1，但是对于仅支持 2009 属性的 Webkit 浏览器，您无法解决#2。

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;
}

如果你只想让你的按钮垂直显示，我建议不要为此目的使用 Flexbox:

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

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