flex布局 子元素常见属性之 flex

flex 用来定义子元素分配父元素的剩余空间，用flex来表示占多少份

用法：
      flex：具体数字；（默认是0，也可以是百分数）
      例如 flex：1； 表示该子元素占用其父元素剩余空间的一份。
      通俗一点就是 在父元素还剩的空间中，父元素的剩余空间会被平均分成几等份（具体分为几份视情况而定），flex：1； 就表示在这几等份中，该子元素占1份。

具体案例解释：

		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
		<style type="text/css">
			div{
				display: flex;
				width: 600px;
				height: 150px;
				margin: 0 auto;
			}
			div span:nth-child(1){
				width: 100px;
				background: purple;
			}
			div span:nth-child(2){
				flex: 1;
				background: orange;
			}
			div span:nth-child(3){
				flex: 2;
				background: green;
			}
			div span:nth-child(4){
				flex: 2;
				background: blue;
			}
		</style>

执行结果：

对结果的解释说明：

1. 定义了一个父盒子div宽度为600px
2. 第一个子元素span定义了100px的宽度，则父元素的剩余宽度为500px
3. 第2、3、 4个span分别占剩余空间的1份、2份、2份，故剩余的500px被平均分为1+2+2=5等份，其中2号占1份，分配到100px；3号和4号分别占2份，各分别分配到200px