弹性盒子总结

弹性盒子

一、前言：

  在我们不断地学习中，我们会有更加方便的方式来布局我们的页面，尤其是类似京东这样稍微复杂的页面，抛开他的功能不讲，单独的网页布局就是非常困难的，如果我们按照之前的浮动布局，不仅让我们的工作量变得异常的多而且浮动带来的高度塌陷的问题也是比较烦人的，于是我们学习了弹性盒子的布局方式，下面就让我来用一个简单的例子来说明弹性盒子的作用。

二、内容

  弹性盒子只需要把父盒子的display属性设为flex,这样其子盒子就能根据设置来布局，不用将子盒子设为浮动，下面是一个简单布局，由于篇幅有限只是简单的介绍一些常用的弹性盒子布局方式

<style type="text/css">
				margin: 0;
				padding: 0;
				list-style: none;
			}
			/* 弹性盒子一般把大小确定的子盒子写死 */
			ul{
				width: 800px;
				border: 10px solid black;
				display: flex;
				flex-direction:column-reversec;
				/*可以使用flex-direction指定弹性元素的排列方式
				(给弹性容器设置)
					可选值:row(水平排列)从左到右
								主轴:从左向右
						row-reverse(反向水平排列)从右到左
								主轴:从右向左
						column纵向排列，从上到下
								主轴:从上到下
						column-reversec,从下到上
								主轴:从下到上
					主轴：
						弹性元素的排列方向为主轴
					侧轴:
						与主轴垂直方向的为侧轴
				*/
			}
			li{
				width: 100px;
				height: 100px;
				background-color: #BBFFAA;
				font-size: 50px;
				text-align: center;
			}
			li:nth-child(1){
			/* 弹性元素的属性
					flex-grow用于设置元素伸展的系数
					(当父元素有多余的空间时来规定其如何伸展,
					默认值为0不增长)
						父元素的剩余空间会按照比例进行分配
				 */
				flex-grow: 1;
			}
			
			li:nth-child(2){
				flex-grow: 2;
				background-color: pink;
			}
			li:nth-child(3){
				flex-grow: 3;
				background-color: orange;
			}
		</style>

以上是css样式，下面是html里边的代码

	<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>

三、总结

  一些新的技术的用途就是为了让我们的布局更加灵活，同时也要实现更多的功能，作为程序员要不断适应新技术，只有这样才能在众多老卷王中不被淘汰。