3

我想在我的 html 中使用弹性盒子模型

我有一个 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-->

我使用显示：框和方向：垂直......但我看到我的按钮内联插入垂直......

我的问题是所有浏览器。

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/

4

1 回答 1

5

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%;
}
于 2013-06-06T12:00:56.313 回答