flex弹性布局的基本属性-CSDN博客

本文链接：https://blog.csdn.net/why0925123/article/details/125886802

本文详细介绍了如何使用HTML和CSS创建一个700x700px的响应式容器，通过flexbox布局实现红绿蓝三个200x200px子元素的均匀分布。同时讲解了flex-direction、justify-content和align-items属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 父级是容器 */
			.wrapper{
				width: 700px;
				height: 700px;
				border: 1px solid black;
				/* 将父级设置为弹性盒子 */
				display: flex;
				/* flex-direction:项目的排列方向 
				     row：按行排列
					 column:按列排列
					 row-reverse:按行排，右对齐，反序
					 column-reverse:按列排，下对齐，反序
				*/
				flex-direction: row;
				/* justify-content:项目在水平方向的对齐方式 
				    flex-start:左对齐
					flex-end:右对齐
					center:居中对齐
					space-evenly:所有项目之间间距相等
					space-between:每两个子项目之间的间距相等
					space-around:每个子项目都有左右相等的外边距
					stretch:如果子项目不设置高度或值为auto，高度将充满容器
				*/
				justify-content: space-around;
				/* align-items:垂直方向对齐方式，只针对一根轴线
				    flex-start:上对齐
				    flex-end:下对齐
				    center:居中对齐
					baseline:基线对齐
					stretch:如果子项目不设置高度或值为auto，高度将充满容器 
					*/
				align-items: center;
			}
			/* 子级是项目 */
			.wrapper div{
				width: 200px;
				height: 200px;
				/* float: left; */
			}
			.wrapper div:nth-of-type(1){
				background-color: red;
			}
			.wrapper div:nth-of-type(2){
				background-color:green;
			}
			.wrapper div:nth-of-type(3){
				background-color:blue;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div></div>
			<div></div>
			<div></div>
			中国华夏
		</div>
	</body>
</html>