弹性盒子

最新推荐文章于 2022-12-29 22:02:02 发布

吃素的黑猫

最新推荐文章于 2022-12-29 22:02:02 发布

阅读量177

点赞数

分类专栏： Web开发——HTML(css) 文章标签： flex css html css3

本文链接：https://blog.csdn.net/qq_44645934/article/details/108547084

版权

Web开发——HTML(css) 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

弹性盒子

1.设置为弹性容器
display: flex;

2.设置主轴方向 flex-direction:row;
row:从左向右
column:从上向下
row-revers:从右向左
column-revers：从下向上

3.设置主轴的分布 justify-content: space-between;
flex-start:向主轴的开始方向靠拢（默认）
cnetr:向主轴的中间方向靠拢
flex-end：向主轴的结束方向靠拢
space-around:平均分布，两边有间距，两边的间距是中间的一半
space-between:平均分布，两边没有间距
space-evenly:平均分布(新)，两边有间距，所有的间距都相等

4.设置侧轴的分布 align-items:center;
flex-start:向侧轴的开始方向靠拢（默认）
cnetr:向侧轴的中间方向靠拢
flex-end：向侧轴的结束方向靠拢
stretch:拉伸（默认）如果设置高度，则此拉伸无效

5.设置换行 flex-wrap:wrap;
nowrap:默认值，不换行
wrap:换行

6. 设置侧轴多行分布 align-content: space-between;
flex-start:向主轴的开始方向靠拢（默认）
cnetr:向主轴的中间方向靠拢
flex-end：向主轴的结束方向靠拢
space-around:平均分布，两边有间距，两边的间距是中间的一半
space-between:平均分布，两边没有间距
space-evenly:平均分布(新)，两边有间距，所有的间距都相等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>弹性容器</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.parent{
				margin: auto;
				width: 700px;
				height: 700px;
				border: 2px solid black;
				/*设置为弹性容器*/
				display: flex;

                /*设置主轴方向*/
				flex-direction:row;
			
				/*设置主轴的分布*/
				justify-content: space-between;
				
				/*设置侧轴的分布*/
				align-items:center;
				
				/* 设置换行*/
			    flex-wrap:wrap;
			 
			    
                /*设置侧轴多行分布*/
			    align-content: space-between;
			   
				
			}
			.child{
				width: 200px;
				height: 200px;
			}
		   .c1{
				background: salmon;
			}
			 .c2{
				background:skyblue;
			}
			.c3{
				background: greenyellow;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child c1">1</div>
			<div class="child c2">2</div>
			<div class="child c3">3</div>
			<div class="child c1">4</div>
			<div class="child c2">5</div>
			<div class="child c3">6</div>
			<div class="child c1">7</div>
			<div class="child c2">8</div>
			<div class="child c3">9</div>
		</div>
	</body>
</html>

吃素的黑猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹性盒子

弹性盒子1.设置为弹性容器 display: flex;2.设置主轴方向 flex-direction:row; row:从左向右 column:从上向下 row-revers:从右向左 column-revers：从下向上3.设置主轴的分布 justify-content: space-between; flex-start:向主轴的开始方向靠拢（默认） cnetr:向主轴的...
复制链接

扫一扫