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还是支持性很强的,由于网上的资源比较多,我就不多说,这种东西没必要去过多的抄袭,基本多做几个布局就明白了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值