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

我使用 display: box 和orientation: vertical...但我看到我的按钮内嵌了垂直...

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 月的草案.其他所有浏览器都有 2009 草案或标准草案的实现，有些浏览器两者都有.

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