Flex layout layout

　The container of the flex layout is a flexible container. First, the container itself will dynamically set its own size according to the elements in the container; then when the flex container is applied with a size (width and height), the elements in the container will be automatically adjusted to the new size. . The flex container can also set the expansion ratio and fixed width, and can also set the arrangement direction (horizontal and vertical) of the elements in the container and whether to support the automatic wrapping of the elements. With this artifact, it is much more convenient to do page layout. Note that after setting to Flex layout, the float, clear and vertical-align properties of child elements will be invalid.

<!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>Add animation callout</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">Fixed width 300px</div>
 </div>
 
 <h1>
 	vertical layout
</h1>
 		  <p>
 			   flex-direction:column;/* Arrange from top to bottom, and the height of the child elements will automatically stretch to cover the height of the entire container*/
 			</p>
 			
 			<p>
 			  flex-direction:column-reverse;/*Arrange from bottom to top, and the height of the child elements will automatically expand to cover the height of the entire container*/
 			</p>
 			<p>
 	       flex-direction:row;/* Arrange from left to right, and the width of the child elements will automatically stretch to cover the width of the entire container*/
 			</p>
 			<p>
 	        flex-direction:row-reverse;/* Arrange from right to left, and the width of child elements will automatically stretch to cover the width of the entire container*/
 			</p>
 			<p>
 	       flex-wrap:wrap;/*Support wrapping, when the total width of the element exceeds the width of the container, it will wrap to display*/<br>/*These two styles can be written together*/<br>flex-flow:column wrap;/*Vertical arrangement, and supports wrapping*/
 			</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">fixed width 300px</div>
 </div>
 
</body>
</html>
<script type="text/javascript">

</script>

Guess you like