css常用指南，弹性盒子模型、块标签横向排列、标签放一行、弹性盒子模型内的布局

最新推荐文章于 2023-08-09 17:39:48 发布

在下，杨江河

最新推荐文章于 2023-08-09 17:39:48 发布

阅读量936

点赞数

分类专栏： Mac开发文章标签： css css3 html

本文链接：https://blog.csdn.net/Rockandrollman/article/details/128523015

版权

Mac开发专栏收录该内容

294 篇文章 2 订阅

订阅专栏

弹性盒子模型，块标签横向排列

.div_parent{
	width: 600px;
	height: 300px;
	border: 1px solid red;
	
}
.div_parent>div{
	width: 100px;
	height: 100px;
}
.div_son1{
	background-color: palevioletred;
}
.div_son2{
	background-color: aqua;
}
.div_son3{
	background-color: aquamarine;
}
.row{
	display: flex;/*设置为弹性盒子模型*/
	flex-direction: row;/*在一行显示，从左到右*/
	flex-wrap: wrap;/*设置是否换行，默认不换行，不换行会自动缩小盒子*/
}
.reverse_row{
	display: flex;
	flex-direction: row-reverse;/*在一行显示，从右到左*/
}
.column{
	display: flex;
	flex-direction: column;/*在一列显示，从上到下*/
	flex-wrap: wrap;
}
.reverse_column{
	display: flex;
	flex-direction: column-reverse;/*在一列显示，从下到上*/
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index1.css"/>
	</head>
	<body>
		<div class="div_parent row">
			<div class="div_son1">1</div>
			<div class="div_son2">2</div>
			<div class="div_son3">3</div>
			<div class="div_son1">1</div>
			<div class="div_son2">2</div>
			<div class="div_son3">3</div>
			<div class="div_son1">1</div>
			<div class="div_son2">2</div>
			<div class="div_son3">3</div>
		</div>
		<div class="div_parent reverse_row">
			<div class="div_son1">1</div>
			<div class="div_son2">2</div>
			<div class="div_son3">3</div>
		</div>
		<div class="div_parent column">
			<div class="div_son1">1</div>
			<div class="div_son2">2</div>
			<div class="div_son3">3</div>
			<div class="div_son1">1</div>
			<div class="div_son2">2</div>
			<div class="div_son3">3</div>
		</div>
		<div class="div_parent reverse_column">
			<div class="div_son1">1</div>
			<div class="div_son2">2</div>
			<div class="div_son3">3</div>
		</div>
	</body>
</html>

在这里插入图片描述

弹性盒子模型内的布局

.div_parent{
	width: 600px;
	height: 300px;
	border: 1px solid red;
	
}
.div_parent>div{
	width: 100px;
	height: 100px;
}
.div_son1{
	background-color: palevioletred;
	align-self: flex-end;/*对单个盒子做对齐方式*/
	order: 3;
	flex-grow: 2;
}
div.div_son2{
	background-color: aqua;
	width: 200px;
	align-self: center;
	order: 2;
	
}
.div_son3{
	background-color: aquamarine;
	order: 1;
	flex-grow: 1;/*如果容器有剩余空间，用flex-frow可以对盒子进行放大，数字指的是放大的比例*/
}
.row{
	display: flex;/*设置为弹性盒子模型*/
	flex-direction: row;/*在一行显示，从左到右*/
	flex-wrap: wrap;/*设置是否换行，默认不换行，不换行会自动缩小盒子*/
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-around; */
	justify-content: space-between;/*对整体做对齐方式*/
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index2.css"/>
	</head>
	<body>
		<div class="div_parent row">
			<div class="div_son1">1</div>
			<div class="div_son2">2</div>
			<div class="div_son3">3</div>
			
		</div>
		
	</body>
</html>