css：flex布局

很多很多的情况下，我们会用到这个样式

long long ago，当我还刚入行的时候，我看到上面的布局想到的是浮动，计算出每一个的大小

现在我秃了，也知道了用flex布局的用法，先把代码写上去：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		.demo {
			width: 620px;
			border: 1px solid #000;
			box-sizing: border-box;
			padding-left: 10px;
			padding-right: 10px;
			display: flex;
			flex-direction: row;
			justify-content: center
		}
		
		.demo div {
			width: 100px;
			margin-top: 10px;
			margin-left: 50px;
			margin-right: 50px;
			margin-bottom: 10px;
			box-sizing: border-box;
			border: 1px solid #000000;
			border-radius: 50%;
		}
	</style>

	<body>
		<div class="demo">
			<div style="height: 100px;"></div>
			<div style="height: 100px;"></div>
			<div style="height: 100px;"></div>

		</div>
	</body>
	<script type="text/javascript" src="js/less.js"></script>

</html>

效果图大概是这样的：

虽然与预期的不大一样，但是不要介意，然后我们再来看一次常用的例子

预期效果图：

这个也是很容易遇到的布局，很多时候当然是左边一个float，右边一个float，当然，也可以不用的

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		.demo {
			display: flex;
			width: 750px;
			border: 1px solid #000;
			box-sizing: border-box;
			justify-content: space-around;
		}
		
		.demo>div {
			flex: none;
		}
		
		.left {
			width: 200px;
			height: 100px;
			margin-top: 50px;
			background: #d4cdcd;
		}
		
		.right {
			width: 380px;
			height: 200px;
		}
		.right p:nth-child(1){
			margin-top: 50px;
		}
	</style>

	<body>
		<div class="demo">
			<div class="left"></div>
			<div class="right">
				<p>时间</p>
				<p>地点</p>
			</div>
		</div>
	</body>


</html>

效果图大概是这样子的：

不要在意像不像，大致布局出来就好了，而且看代码，也可以发现之前一致导致的布局坍塌也没了，当然这才是我想表达的重点，

然后再讲解（网上抄袭）下flex布局的解释

菜鸟驿站关于flex的解释

简单来说，除了一些老旧的浏览器，基本flex还是支持性很强的，由于网上的资源比较多，我就不多说，这种东西没必要去过多的抄袭，基本多做几个布局就明白了

猜你喜欢