美文网首页
flex三个属性的理解

flex三个属性的理解

作者: 西叶web | 来源:发表于2022-04-19 12:02 被阅读0次

    flex简写有grow放大,shrink收缩,basis基准三个属性

    顺序为 flex: grow shrink basis

    0 0 40px 初始就是40px宽
    不参与伸缩,与世隔绝

    1 0 40px 就是初始40px宽
    有多的空间的话,grow为1 是瓜分剩余空间的权重,和其他有grow的一起把剩下空间占满

    0 1 40px 就是初始40px宽
    不够空间的话,shrink为1 就是超出部分要扣除的权重,超出的空间和其他有shrink的一起平摊,按权重减掉

    1 1 40px 就是初始40px
    空间多或少都参与权重增减

    不设flex的话,初始值是 0 1 auto,也就是盒子不会参与放大,只会参与收缩,容器容不下,就按权重收缩

    相关文章

      网友评论

          本文标题:flex三个属性的理解

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