Flex布局的容器是一个伸缩容器,首先容器本身会更具容器中的元素动态设置自身大小;然后当Flex容器被应用一个大小时(width和height),将会自动调整容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度,还可以设置容器中元素的排列方向(横向和纵向)和是否支持元素的自动换行。有了这个神器,做页面布局的可以方便很多了。注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
.flexBox{ display:-webkit-flex;-webkit-flex-flow: row;-webkit-flex-wrap: nowrap; width:600px; margin:50px auto; background-color:#9CF}
.flexBox div{ height:100px;}
.flexBox .item1{-webkit-flex:1;background:#ff9900;}
.flexBox .item2{-webkit-flex:1;background:#936;}
.flexBox .item3{-webkit-flex:1;background:#39C;}
.vertical-flexBox{ display:-webkit-flex;-webkit-flex-flow: row;-webkit-flex-wrap: nowrap;
flex-direction:column;
width:100%;height: 50%; margin:50px auto; background-color:#9CF;}
.vertical-flexBox div{ height:100px;}
.vertical-flexBox .item1{-webkit-flex:1;background:#ff9900;}
.vertical-flexBox .item2{-webkit-flex:1;background:#936;}
.vertical-flexBox .item3{-webkit-flex:1;background:#39C;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=z1R8HuRqMNOyGCpnfUawPRKFFDNhGLGv"></script>
<title>添加动画标注点</title>
</head>
<body>
<div class="flexBox">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div style=" width:300px; background-color:#96F">固定宽度300px</div>
</div>
<h1>
垂直布局
</h1>
<p>
flex-direction:column;/*从上到下排列,并且子元素的高度会自动伸缩铺满整个容器的高度*/
</p>
<p>
flex-direction:column-reverse;/*从下往上排列,并且子元素的高度会自动伸缩铺满整个容器的高度*/
</p>
<p>
flex-direction:row;/*从左到右排列,并且子元素的宽度会自动伸缩铺满整个容器的宽度*/
</p>
<p>
flex-direction:row-reverse;/*从右到左排列,并且子元素的宽度会自动伸缩铺满整个容器的宽度*/
</p>
<p>
flex-wrap:wrap;/*支持换行,当元素的总宽度超过了容器的宽度,会换行显示*/<br>/*这两个样式可以写在一起*/<br>flex-flow:column wrap;/*纵向排列,并且支持换行*/
</p>
<div class="vertical-flexBox">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div style=" height:50px; background-color:#96F">固定宽度300px</div>
</div>
</body>
</html>
<script type="text/javascript">
</script>