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

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

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

具体案例解释：

		

			1
			2
			3
			4
		
		

执行结果：

对结果的解释说明：

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