【CSS随笔】弹性盒子的flex属性

flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间

flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性

flex-grow:  可拉伸

flex-shrink：可压缩

flex-basis： 当前元素的宽度

flex默认值：

flex-grow:0, flex-shrink:1, flex-basis:auto

flex:1 flex-grow:1, flex-shrink:1,    flex-basis:0%

flex: auto    flex-grow:1,   flex-shrink:1,   flex-basis:auto

用这种属性可以实现圣杯布局，就是两边固定，中间自适应。 

<p>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</p>


p{

  display:flex;
  width:60%;
  height:150px;
  backgroud-color:pink;
  margin:100px auto;

}

p span{

  flex:1;

}