zoukankan      html  css  js  c++  java
  • flex-grow遇到的问题

    在进行flex布局的时候,会经常遇到flex-grow无效这个问题

    深入了解了一下,容器内item的flex-grow属性是按照父元素剩余空间来分配的。

    flex-grow重点说明落在剩余这两个字上,父元素剩余的空间,那什么算父元素剩余空间呢,简单的理解就是(父元素的宽度-子元素总和的宽度),这里有两种情况:

    1、子元素没有设置高度:

    那么整个父元素的width就是剩余宽度,这个时候可以正常使用flex-grow.

    2、子元素设置了宽度:

    如果子元素有宽度,那么这个时候flex-grow的作用就是把剩余空间=(父元素宽度-子元素总和宽度)按照flex-grow的数值分配给每一个子元素,这个时候flex-grow的作用就像是实实在在的width一样,给子元素增加宽度,
    在这种情况下的得到的效果就是一个无法改变的分配好的宽度,即使你子元素a的内容超出了分配好的宽度,也不会影响宽度分配情况,你只能用overflow来更好地美观一下啊,而这个就是我们希望的到的分配效果,代码如下:
    .a div{
       0;
    }

    给每一个div设置一个0;然后进行分配flex-grow,这个时候加上去的宽度就是实实在在的width.

    示例代码入下:

    <div class="a">
        <div class="b p">B</div>
        <div class="c p">C</div>
        <div class="d p">D</div>
     </div>
    a {
            display: flex;
            background-color: wheat;
       }
    
    .b {
            flex-grow: 2;
       }
    
    .c {
            flex-grow: 1;
       }
    
    .d {
            flex-grow: 4;
       }


    参考链接:https://www.jianshu.com/p/fbc6b4ebf3c6

                      https://www.jianshu.com/p/fbc6b4ebf3c6
  • 相关阅读:
    水平居中、垂直居中,总有一款适合你的
    HTML利用posotion属性定位 小技巧
    angular2 如何使用websocket
    angular2 引入jquery
    HTML+CSS学习笔记
    用eclipse 搭建struts2环境
    html对URL传参数进行解析
    angular2上传图片
    当div元素内的内容超出其宽度时,自动隐藏超出的内容
    关于引用对象的使用的一点小理解
  • 原文地址:https://www.cnblogs.com/psxiao/p/12313690.html
Copyright © 2011-2022 走看看