弹性布局最简单详细的理解学习方法

最新推荐文章于 2022-05-15 20:07:14 发布

呆呆敲代码丫

最新推荐文章于 2022-05-15 20:07:14 发布

阅读量387

点赞数 1

分类专栏：唯唯同学布置的作业好好学习吧!!! 文章标签： css3 html5 css html

本文链接：https://blog.youkuaiyun.com/weixin_46474458/article/details/117703973

版权

唯唯同学布置的作业好好学习吧!!! 专栏收录该内容

16 篇文章

订阅专栏

本文深入介绍了HTML和CSS中的Flex布局，包括如何设置弹性容器和弹性子元素，以及如何通过`flex-direction`控制主轴方向，使用`justify-content`和`align-items`调整主轴和侧轴上的内容分布。示例代码详细展示了如何实现从上到下的内容排列及居中对齐效果。

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

<!DOCTYPE html>
<html>
	<head>
		<!-- 
		 弹性布局
		 
		 弹性容器:设置了display:flex;这个为弹性容器,里面的子元素会按照弹性布局的方式进行布局.
		 弹性子元素:设置了display:flex;的弹性容器的直接子元素即为弹性子元素
		 
		 
		 弹性主轴方向:
		 默认主轴方向为从左到右flex-direction: row;
		 从上往下flex-direction: column;
		 -->
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/* parent元素为弹性容器 */
			.parent{
				width: 800px;
				height: 800px;
				border: 1px solid #cccc;
				margin: 0 auto;
				/* 设置为弹性容器 */
				display: flex;
				/* 主轴方向
				 row:从左到右
				 column:从上往下
				 row-reverse:从右到左
				 column-reverse:从下往上
				 */
				flex-direction: column;
				/* 设置主轴的内容分布 
				flex-start:向主轴的开始位置靠拢(默认)
				center:(居中)向主轴的中心位置靠拢
				flex-end:向主轴的结束位置靠拢
				space-around:平均分布,两边有间距,两边间距是中间的一半
				space-between:平均分布,两边没有间距
				space-evenly:(新)平均分布,两边有边距,两边的边距跟中间是一样的
				*/
				justify-content: center;
				
				/* 设置侧轴的内容分布
				 flex-start:向侧轴的开始位置靠拢
				 center:(居中)向侧轴的中心位置靠拢
				 flex-end:向侧轴的结束位置靠拢
				 stretch:拉伸(默认),如果设置高度,此拉伸无效
				 */
				align-items: flex-start;
				
			}
			/* child元素为弹性子元素 */
			.child{
				width: 200px;
				height: 200px;
			}
			.a1{
				background: yellow;
			}
			.a2{
				background: skyblue;
			}
			.a3{
				background: pink;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child a1">111</div>
			<div class="child a2">222</div>
			<div class="child a3">333</div>
		</div>
	</body>
</html>