Flexbox不支持按钮 [英] Flexbox doesn't work with buttons

问题描述

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

I want to use flex box model in my html

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

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是这样：

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

推荐答案

您有几件事

1. 您只使用2009年草稿的旧属性，并非每个浏览器都有。 IE10是第一个支持Flexbox的IE浏览器，它实现了2012年3月草案。

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.

Webkit的2009 Flexbox实现仅适用于按钮。如果添加其他兄弟元素，它们将按照您的预期垂直放置。 Chrome同时具有2009和标准实施，但Safari，Android，iOS只有2009实施。

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.

通过使用正确的属性集合修复＃1，但是对于只支持2009属性的Webkit浏览器，没有什么可以做的＃2。

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

如果你想要的是让你的按钮垂直显示，为此目的使用Flexbox：

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

这篇关于Flexbox不支持按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！