前端弹性布局使用

为什么需要弹性布局：

传统 display: float
position属性,
它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

flex 弹性布局诞生：

1.flex-direction，指定主轴是哪一根(row、column) 主轴方向(row-reverse,column-reverse)

2. justify-content属性 /* 主轴对齐方式 */
/* flex-start: 左对齐 flex-start 右对齐 center: 居中对齐 space-between: 左右对齐 */
3. flex-wrap: wrap;
/* 如果当水平填充满了以后是否换行 **/
4. align-items: center; /* 测轴对齐方式 */
5. flex-grow: 1; 权重

案例demo使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		     *{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 300px;
				border: 1px solid;
				margin:100px auto;
				display:flex;  /*   声明该容器使用flex布局*/
				flex-direction: row;   /*  1.指定主轴是哪一根(row、column)  主轴方向(row-reverse,column-reverse) **/
				justify-content: space-between;  /* 主轴对齐方式 */
				/*  flex-start: 左对齐   flex-start 右对齐   center: 居中对齐  space-between: 左右对齐   */
				flex-wrap: wrap;  
				/* 如果当水平填充满了以后是否换行  **/
				
				align-items: center;  /* 测轴对齐方式 */
				
				/*align-content: center;*/
		      /* align-items: flex-end;*/
			}
			#wrap > .item{
				width: 30px;
				height: 50px;
				background: pink;
				text-align: center;
				line-height: 50px;
				 /* 3.弹性空间: 弹性因子
				  *  宽度为400- 50*5 =150,这150就是弹性空间
				  *  那么一个item的权值都是1，总共有5份, 那么每一份都是30 
				  *  把这个30加入到每一个容器中，每个容器大小是50+30=80
				  *  可以当做Android  线性布局权重使用
				  */
				flex-grow: 1;
			}
			
		</style>
	</head>
	<body>
		
			<!-- #warp:是容器  item:是项目 -->
		<div id="wrap">
			<div class="item">1</div>
			<div class="item">2</div>
			<!--<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>-->
		</div>
		
	</body>
</html>

前端弹性布局使用

猜你喜欢