CSS 弹性布局 flex 属性详解

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

1、flex-grow

定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例，如

    
item 1
    
item 2
    
item 3

即当有多余空间时item1、item2、和item3以1：2:3的比例放大。

2、flex-shrink

定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例。

3、flex-basis

表示项目在主轴上占据的空间，默认值为auto。如下代码

    
item 1
    
item 2
    
item 3

其效果图为

image.png