美文网首页css3css
flex布局 flex, flex-grow,flex-shri

flex布局 flex, flex-grow,flex-shri

作者: 99ZY | 来源:发表于2021-10-17 02:47 被阅读0次

    flex是flex, flex-grow,flex-shrink, flex-basis 的缩写形式:
    flex-grow(默认为0),
    flex-shrink(默认为1),
    flex-basis (默认为auto)
    如:flex 取值为 none,则计算值为 0 0 auto,如下是等同的:

    .item {flex: none;}
    .item {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
    }
    

    当 flex取值为 auto,则计算值为 1 1 auto,如下是等同的:

    .item {flex: auto;}
    .item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
    }
    

    当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下是等同的:

    .item {flex: 1;}
    
    .item {flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}
    

    当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink取 1,有如下等同情况(注意 0% 是一个百分比而不是一个非负数字):

    .item-1 {flex: 0%;}
    .item-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0%;} 
    

    当 flex取值为两个非负数字,则分别视为 flex-grow和 flex-shrink的值,flex-basis取 0%,如下是等同的:

    .item {flex: 2 3;} 
    .item { flex-grow: 2; flex-shrink: 3; flex-basis: 0%;}
    

    相关文章

      网友评论

        本文标题:flex布局 flex, flex-grow,flex-shri

        本文链接:https://www.haomeiwen.com/subject/ztmioltx.html