Flex实例

sly94

于 2017-06-01 14:33:45 发布

阅读量447

点赞数

本文链接：https://blog.csdn.net/sly94/article/details/72830543

版权

一:flex-flow(是flex-direction属性和flex-wrap属性的简写)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>flex-flow</title>
	<link rel="stylesheet" href="">
	<style>
		.parent{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			display: flex;
			margin-bottom: 20px;
		}
		.box1{
		
			flex-flow: row nowrap;

		}
		.child{
			width: 20px;
			height: 20px;
			display: inline-block;
			text-align: center;
			background-color: #f89;
			border-radius: 10px;

		}
	</style>
</head>
<body>
	<div class="parent box1">
		<span class="child">1</span>
		<span class="child">2</span>
	</div>
	
</body>
</html>

.box1{
		
			flex-flow: row-reverse nowrap;

		}

.box1{
			flex-flow: column nowrap;
		}

.box1{
			flex-flow: column-reverse nowrap;
		}

.box1{
			flex-flow: row nowrap;
		}

<div class="parent box1">
		<span class="child">1</span>
		<span class="child">2</span>
		<span class="child">3</span>
		<span class="child">4</span>
		<span class="child">5</span>
		<span class="child">6</span>
		<span class="child">7</span>
		<span class="child">8</span>
		<span class="child">9</span>
		<span class="child">10</span>
		<span class="child">11</span>
	</div>

.box1{
			flex-flow: row wrap;
		}

.box1{
			flex-flow: row wrap-reverse;
		}

二：垂直水平居中（justify-content:center;align-items:center）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>justify-content,align-items</title>
	<link rel="stylesheet" href="">
	<style>
		.box{
			display: flex;
			background-color: #ddd;
			width: 200px;
			height: 200px;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="child">垂直水平居中</div>
	</div>
</body>
</html>

三：使用flex布局（上中下和左中右布局）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css">
		.holyGrid{
			display: flex;
			flex-direction: column;
			height: 600px;
		}
		/*整个盒子高度为600px,header footer的flex都为1，holyGrid-body的flex为4，
		则，每一份的高度为600/(1+1+4),header和footer都为100px，holyGrid-body的高度为400px
		 */
		header,footer{
			flex: 1;
			background-color: #ccc;
		}
		.holyGrid-body{
			display: flex;
			flex: 4;
		}
		.holyGrid-content{
			background-color: #f89;
			flex: 1
		}
		/*flex: 0 0 100px;左右两侧的宽度固定都为100px*/
		.holyGrid-nav,.holyGrid-aside{
			flex: 0 0 100px;
		}
		/* order默认为0，值越小排列越靠前order:-1,的holyGrid-nav就排在最前面; */
		.holyGrid-nav{
			background-color: #35f;
			order:-1;
		}
		.holyGrid-aside{
			background-color: #5f7;
		}
	</style>
</head>
<body class="holyGrid">
	<header></header>
	<div class="holyGrid-body">
		<main class="holyGrid-content"></main>
		<nav class="holyGrid-nav"></nav>
		<aside class="holyGrid-aside"></aside>
	</div>
	<footer></footer>
</body>
</html>