[css3] 弹性盒子理解

弹性盒子通过display:flex实现，设置了这个属性的元素被称为弹性容器，其子元素称为弹性项。继续设置父元素的flex-direction:row，可以设置子元素的排列方式，这种控制在弹性容器的子子元素中是失效的。

弹性盒子，顾名思义，它是有弹性的。设置flex-direction，事实上可以设置它的弹性方向，如果是row，那么每个项都在一个列上，那么每个列都有一个项，它就会在一行展示了。这种时候，设置弹性项的宽度，它会尽量去满足这种宽度，即使不惜压缩身边的兄弟弹性项。

 

如图，item2 会不断挤压两边，直至item1和item3自己被炸干（只容的下子元素），这是item2的宽度再大都没用

 

 

 

 

 

如果触碰到了弹性容器的底，就会施展不开，再宽都没用。而如果设置它的高，就没有这种约束了，弹性完全释放，想多长就多长。

 

默认，弹性项都是等长的，取最大的那个，当然也可以对着弹性项设置大小，一般设置的是比例，比如说一个弹性项设置了flex:1，另一个弹性项设置了flex:2，再如果是按行排列，那么它们的宽将会是1:2。