css3弹性盒子布局

最新推荐文章于 2024-08-16 20:24:29 发布

Kiwi__123

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量69

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/Kiwi__123/article/details/128275255

版权

display:flex -->写在父级元素里面，让父级元素里面的子元素都横排显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.wrap {
			width: 300px;
			height: 300px;
			background: #666;
			display: flex;
		}
		.box1 {
			width: 50px;
			height: 50px;
			background: red;
		} 
		.box2 {
			width: 50px;
			height: 50px;
			background: green;
		} 
		.box3 {
			width: 50px;
			height: 50px;
			background: blue;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>

flex-direction -->改变元素方向

      flex-direction: column; 竖排显示
           flex-direction: column-reverse; 竖排翻转
           flex-direction: row; 横排显示
           flex-direction: row-reverse; 横排翻转

justify-content -->写在父级元素里面，决定子元素水平方向的排列方式

1、 justify-content:flex-start;

2、justify-content:center;

3、justify-content:flex-end;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.wrap {
			width: 300px;
			height: 300px;
			background: #666;
			display: flex;
			justify-content: flex-start;
		}
		.box1 {
			width: 50px;
			height: 50px;
			background: red;
		} 
		.box2 {
			width: 50px;
			height: 50px;
			background: green;
		} 
		.box3 {
			width: 50px;
			height: 50px;
			background: blue;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>

1、 justify-content:flex-start;

2、justify-content:center;

3、justify-content:flex-end;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.wrap {
			width: 300px;
			height: 300px;
			background: #666;
			display: flex;
			justify-content: center;
		}
		.box1 {
			width: 50px;
			height: 50px;
			background: red;
		} 
		.box2 {
			width: 50px;
			height: 50px;
			background: green;
		} 
		.box3 {
			width: 50px;
			height: 50px;
			background: blue;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>

1、 justify-content:flex-start;

2、justify-content:center;

3、justify-content:flex-end;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.wrap {
			width: 300px;
			height: 300px;
			background: #666;
			display: flex;
			justify-content: flex-end;
		}
		.box1 {
			width: 50px;
			height: 50px;
			background: red;
		} 
		.box2 {
			width: 50px;
			height: 50px;
			background: green;
		} 
		.box3 {
			width: 50px;
			height: 50px;
			background: blue;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>

align-item -->写在父级元素里面，决定子元素垂直方向的排列方式

align-items: flex-start；

align-items: flex-end；

align-items: center；

常见关于弹性盒子的面试题：如何让一个元素在一个盒子里水平、垂直方向都居中？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.wrap {
			width: 300px;
			height: 300px;
			background: #666;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.box1 {
			width: 50px;
			height: 50px;
			background: red;
		} 
		/* .box2 {
			width: 50px;
			height: 50px;
			background: green;
		} 
		.box3 {
			width: 50px;
			height: 50px;
			background: blue;
		} */
	</style>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<!-- <div class="box2"></div>
			<div class="box3"></div> -->
		</div>
	</body>
</html>