Flex布局布局

　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>

猜你喜欢