css3-弹性盒子

最新推荐文章于 2024-08-16 15:26:29 发布

True_cl

最新推荐文章于 2024-08-16 15:26:29 发布

阅读量596

点赞数

分类专栏： css3 程序员

本文链接：https://blog.csdn.net/True_cl/article/details/105610606

版权

程序员同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

一，弹性盒子的好处

相对于以前的布局的方式分别是浮动布局，定位布局，这两种布局方式都有有一个致命的缺点，如果把网页进行拉伸或者是通过移动端的方式进行打开网页，那这个网页会直接乱套了！，
css3新增的这个伸缩盒属性可以轻松解决这个问题！
它是可以当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

二，介绍弹性盒子的主体内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
这个弹性容器主要是通过display属性的值为 flex 或 inline-flex将其定义为弹性容器。
而一个弹性容器里面可以有很多个弹性子元素，可以通过设置flex-direction来调整主轴的具体方向和设置flex-wrap来设置子元素是否换行

三，弹性盒子里面关键设置点

弹性盒子通过设置父元素的display：flex；让父元素具有弹性属性，但是还要设置子元素的一些属性，才能让这个元素体具有伸缩性，
1，justify-content
如果给子元素设置justify-content属性，可以让子元素在主轴（横轴）方向上的对齐方式
代码演示：

 <style type="text/css">
	  	.box{
	  		width: 800px;
	  		height: 500px;
	  		background-color: #333;
	  		display: flex;
	  		justify-content: center;
	  	}
	  	.box div:nth-child(1){
	  		width: 100px;
	  		height: 100px;
	  		background: red;
	  	}
	  	.box div:nth-child(2){
	  		width: 100px;
	  		height: 100px;
	  		background: yellow;
	  	}
	  	.box div:nth-child(3){
	  		width: 100px;
	  		height: 100px;
	  		background: blue;
	  	}
	  </style>
</head>
<body>
	<div class="box">
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>

2，align-items
如果给子元素设置align-items属性，可以让子元素在交叉轴（纵轴）方向上的对齐方式
代码演示：

.box{
	  		width: 800px;
	  		height: 500px;
	  		background-color: #333;
	  		display: flex;
	  		align-items: center;
	  	}

3，align-content
这个类似于align-items，如果在子项没有设置高度的情况下，可以将子项的高度拉满
代码演示：

.box{
	  		width: 800px;
	  		height: 500px;
	  		background-color: #333;
	  		display: flex;
	  		align-content: stretch;
	  	}
	  	.box div:nth-child(1){
	  		width: 100px;
	  		background: red;
	  	}
	  	.box div:nth-child(2){
	  		width: 100px;
	  		background: yellow;
	  	}
	  	.box div:nth-child(3){
	  		width: 100px;
	  		background: blue;
	  	}