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

最新推荐文章于 2024-04-21 07:10:13 发布

呆呆敲代码丫

最新推荐文章于 2024-04-21 07:10:13 发布

阅读量319

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_46474458/article/details/117703973

版权

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

16 篇文章 1 订阅

订阅专栏

<!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>

呆呆敲代码丫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性布局最简单详细的理解学习方法

<!DOCTYPE html><html> <head> <!-- 弹性布局弹性容器:设置了display:flex;这个为弹性容器,里面的子元素会按照弹性布局的方式进行布局. 弹性子元素:设置了display:flex;的弹性容器的直接子元素即为弹性子元素弹性主轴方向: 默认主轴方向为从左到右flex-direction: row; 从上往下flex-direction: column;
复制链接

扫一扫