• 技术文章 >Web开发 >css教程

    css中flex-grow属性是什么

    小妮浅浅小妮浅浅2021-10-23 10:12:13原创6353

    1、flex-grow指扩展flex子项所占据的宽度,扩展的空间就是除去元素外剩余的空白间隙。

    2、不支持负值,默认值是0,表示不占用剩余的空白间隙扩展自己的宽度。

    如果flex-grow大于0,则flex容器剩余空间的分配就会发生。

    实例

    // HTML部分
    <div>
    <div></div>
    <div></div>
    <div></div>
    </div>
    // CSS部分
    .box{
    width: 600px;
    height: 200px;
    border: 1px solid;
    display: flex;
    }
    .box div:nth-of-type(1){
    width: 100px;
    height: 100px;
    background-color: red;
    }
    .box div:nth-of-type(2){
    width: 150px;
    height: 100px;
    background-color: skyblue;
    }
    .box div:nth-of-type(3){
    width: 200px;
    height: 100px;
    background-color: yellow;
    }

    以上就是css中flex-grow属性的介绍,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css flex-grow
    品易云
    上一篇:css中order属性的介绍 下一篇:css中flex-shrink属性是什么

    相关文章推荐

    • css中animation是什么• css背景中有哪些方法• css有哪些字体文本样式• css中盒模型的注意点• css中counter-reset属性是什么• css中counter-increment属性是什么• css中counter()函数的介绍• css中couters函数是什么• css中align-content属性是什么• css中align-items属性是什么• css中justify-content属性是什么• css中flex-flow属性是什么• css中flex-wrap属性是什么• css中flex-direction属性是什么• css中order属性的介绍

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网