这是一道高频面试、笔试题目。
flex:1;
是 flex-grow: 1;
、flex-shrink: 1;
和 flex-basis: 0%;
的缩写。
flex-grow
属性定义项目的放大比例,默认值为 0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow
属性都为 1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为 2,其他项目都为 1,则前者将比其他项目多一倍的剩余空间。flex-shrink
属性定义了项目的缩小比例,默认值为 1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink
属性都为 1,则当空间不足时,它们将等比例缩小。如果一个项目的flex-shrink
属性为 0,其他项目都为 1,则空间不足时,前者不会缩小。flex-basis
属性定义了在分配多余空间之前,"item"占据的主轴空间(main size)。默认值为auto
,即项目的本来大小。但是,当设置为 0% 时,它将占据尽可能少的空间。
因此,flex:1;
表示项目可以放大,也可以缩小,并且在分配多余空间之前,它将占据尽可能少的空间。