初识Flexbox 布局

发布时间：2020-12-15 04:00:07 所属栏目：百科来源：网络整理

导读：一、首先创建一个flexbox容器 .flexboxcontainer{display: -webkit-flex;display: flex;} 二、flex项按行排列 flex项目默认按行排列，也可设置为column，按列排列，默认设置为row .flexboxcontainer{display: -webkit-flex;display: flex;-webkit-flex-direc

一、首先创建一个flexbox容器

	.flexboxcontainer{
		display: -webkit-flex;
		display: flex;

	}

二、flex项按行排列

flex项目默认按行排列，也可设置为column，按列排列，默认设置为row

	.flexboxcontainer{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
                  flex-direction: row;
	}
	.flexboxcontainer>div{
		width:100px;
		height:100px;
		background-color:#e46119;
		border:1px solid #ccc;
		margin:5px;
	}

三、flex项按列排列

	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

四、flex项左(flex-start)对齐和右(flex-end)对齐（如果是row，设置justify-content;如果是column，设置align-items）

	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}

五、flex项行居中(center)对齐，列居中同理

	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		height:300px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}

六、自定义比例分配

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		height:300px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}
	.bigitem{
		-webkit-flex:3 0 0;
		flex:3 0 0;
	}
	.smallitem{
		-webkit-flex:1 0 0;
		flex:1 0 0;
	}
	.flexboxcontainer>div{
		height:100px;
		background-color:#e46119;
		border:1px solid #ccc;
		margin:5px;
	}
</style>
</head>
<body>
<div class="flexboxcontainer">
	<div class="bigitem"></div>
	<div class="smallitem"></div>
</div>

</body>
</html>

七、多行居中布局（webkit内核浏览器、IE11支持，Firefox不支持）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
	.flexboxcontainer{
		border:1px solid #ccc;
		width:450px;
		height:300px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-flow: column wrap;
		flex-flow: column wrap;
		-webkit-align-content: stretch;
		align-content: stretch;
	}
	.flexboxcontainer>div{
		width:100px;
		height:100px;
		background-color:#e46119;
		border:1px solid #ccc;
		margin:5px;
	}
</style>
</head>
<body>
<div class="flexboxcontainer">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!