【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:1flex-grow:1, flex-shrink:1, flex-basis:0%

flex: autoflex-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;}