我想在我的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;
}
解决方法
你有一些事情对你不利.
>您只使用2009年草案中的旧版属性,而不是每个浏览器都有一个实现. IE10是第一款支持FlexBox的IE浏览器,它实现了2012年3月的草案.每个其他浏览器都有2009草案或标准草案的实现,有些同时具有这两种浏览器.
> Webkit的2009 FlexBox实现不适用于按钮.如果添加其他同级元素,它们将按照您的预期垂直放置. Chrome有2009和标准实现,但Safari,Android,iOS只有2009实现.
您可以使用正确的属性集合来修复#1,但对于仅支持2009属性的Webkit浏览器,您无法对#2做任何事情.
.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：
button {
display: block;
width: 100%;
}
