CSS中flex的属性[编辑]

---

1.作用：设置宽度

2.属性：

flex-grow　扩展比率

flex-shrink 收缩比率

flex-basis  伸缩基准值

flex默认值为:0 1 auto , 即flex-grow:0;  flex-shrink:1;  flex-basis:auto;

三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的，且这三个属性都是在子元素上设置的。

flex-basis

• 设置元素的宽度，虽然width也可以设置元素的宽度，但flex-basis会覆盖width的值。它规定的是子元素的基准值，是否溢出的计算与此属性相关，它规定的范围取决于box-sizing。
• 默认值为：auto
• 取值情况：

   auto:首先检索该元素的主尺寸，如果主尺寸不为auto,则使用值采取主尺寸的值，如果是auto,使用content

   content:该子元素的内容自动布局，有的用户代理没有实现content值，等效的替代方案是flex-basis和主尺                        寸都取auto.

   百分比：根据伸缩父容器的主尺寸计算，如果父容器的主尺寸取决于子元素，则计算结果和设为auto的一样.

• 补充：flex-basis与width的区别

                  如果没有设置flex-basis属性，flex-basis的大小为项目width的大小。

                  如果没有设置width属性，flex-basis的大小就是项目内容content的大小。

                  使用max-width、min-width来限制flex-basis：

                      item{

                              flex-basis:250px; 

                              max-width:100px; 

                              }

 

                      item{

                               flex-basis:100px;

                               min-width:250px;

                               }

flex-grow 

• 当父元素的宽度 ＞ 所有子元素的宽度的和时，即父元素有剩余空间，子元素分配父元素的剩余空间。
• 默认值：0 ，表示该子元素不索取父元素的剩余空间。若值 ＞ 0，表示索取，值越大，索取的越多。

flex-shrink 

• 当父元素的宽度 ＜ 子元素的宽度之和时，即子元素超出父元素，子元素缩小自己的宽度。
• 默认值：1 ，父元素宽度 ＜ 子元素宽度之和，子元素宽度缩小。值越大，减小得越厉害。若值为0，表示不减小。

3.flex三个属性常见的取值：

   flex        flex-grow        flex-shrink     flex-basis                   备注

默认值            0                      1                  auto

none                 0                      0                  auto

auto                    1                        1                  auto

1(非负)             1                      1                   0%           视为flex-grow的值

24px(长度)            1                      1                   24px           视为flex-basis的值

0%(百分比)    1                      1                       0%           视为flex-basis的值

2 3(两个非负)    2                      3                       0%        视为flex-grow、shrink的值

23  32px             23                      1                 32px  视为flex-grow、basis的值,flex-shrin取1

秀友百科词条内容均由网友提供，仅供参考。如发现词条内容有问题，请联系管理员。