FlexBox弹性盒子计算规则

Kylin_Mountain 发布于2019-08-30 12:57 / 880人阅读

摘要：申明的值为，不出现伸展的情况申明的值不为，且子盒子的或值之和容器的的左边界到右边界的值。分配规则是按子盒子属性值所占百分比来分配见上首先依据属性计算各个弹性盒子的宽度值，，一共溢出了。

和FlexBox弹性盒子计算规则相关的属性有：

margin

flex-basis

flex-grow

flex-shrink

margin

Flex容器每一行的宽度 = 每个子容器的宽度 + 子容器margin-left和margin-right的值

    
    html:
    
    
        
        
        
    
    
    css:
    
    .container {
            display: flex;
            width: 400px;
        }
        .item {
            height: 40px;
        }
        .first {
            flex: 1 0 0;
            background-color: red;
        }
        .second {
            flex: 2 0 0;
            background-color: blue;
            margin: 0 50px;
        }
        .third {
            flex: 3 0 0;
            background-color: yellow;
        }

总width(400px) = 总margin(100px) + 每个item的宽度;

由于flex-basis属性值为0，剩余空间为400px，则各个子盒子会根据自身的flex-grow属性值及所占总比重来分配剩余空间
.first宽度: 400*(1/(1+2+3))
.second宽度: 400*(2/(1+2+3))
.third宽度: 400*(3/(1+2+3))

flex-basis

子盒子的基准值

可以代替申明width属性

同时声明width属性和flex-basis属性时，会以flex-basis的值来计算

当flex-basis属性值为0，在width有申明的情况下以width来计，width没有的申明的话，则按其内容来计。

flex-grow

flex-grow申明的值为0，不出现伸展的情况

flex-grow申明的值不为0，且子盒子的flex-basis(或width)值之和 < 容器的padding的左边界到右边界的值。那么子盒子会根据申明的flex-grow值去分配剩余的空间。

分配规则是按子盒子flex-grow属性值所占百分比来分配: demo见上

flex-shrink


    
    
    


.container {
    display: flex;
    width: 200px;
    height: 400px;
    border: 1px solid #c3c3c3;
}
.first {
    flex-basis: 40px;
    flex-shrink: 1;
}        
.third {
    flex-basis: 40px;
    flex-shrink: 2;
}
.second {
    flex-shrink: 3;
    width: 200px;
}

首先依据flex-basis属性计算各个弹性盒子的宽度值，(200+40+40)px，一共溢出了80px。
然后依据各个弹性盒子的flex-shrink属性值，算出其加权后的综合值：
1*40 + 2*40 + 3*200 = 720(px);
.first需要缩小的值：(40*1/720)*80 约等于4px
.second需要缩小的值：(40*2/720)*80 约等于9px
.third需要缩小的值：(200*3/720)*80 约等于67px
第一个盒子的宽度40-4 = 36px
第二个盒子的宽度40-9 = 31px
第三个盒子的宽度200-67 = 133px

如果flex-basis的属性未设置，即flex-basis: 0,那么弹性盒子计算多余空间或者溢出空间的宽度是依据其width的值，如果width未设置，那么是其内容的宽度

如果同时设置了flex-basis的属性值和width的值，那么将会忽略width的值

flex-basis可设为百分比，是相对于祖先申明为display:flex的元素而言

几个常见的flex取值：

flex: 1; -->> flex: 1 1 0%;

flex: none; -->> flex: 0 0 auto;

flex: auto; -->> flex: 1 1 auto;

flex: 0 auto;或者 flex: initial -->> flex: 0 1 auto; 即为flex的初始值

GPU云服务器云服务器弹性伸缩规则释放用户可以设置弹性云服务器告警规则 flexbox FlexBox详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115200.html

FlexBox 布局详解

摘要：很久没有写博客了，这里把之前学习布局的一篇笔记整理了一下。其在文档流中的直接子元素将成为。子元素在容器内排列的方向称为主轴，跟主轴垂直的方向称为辅轴。很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!! flex 弹性布局FlexBox 可控制子元素: 水平或垂直排成一行控制子元素的对齐方式控制子元素的高度／...

incredible 2019-08-29 12:42 评论0 收藏0
FlexBox 布局详解

摘要：很久没有写博客了，这里把之前学习布局的一篇笔记整理了一下。其在文档流中的直接子元素将成为。子元素在容器内排列的方向称为主轴，跟主轴垂直的方向称为辅轴。很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!! flex 弹性布局FlexBox 可控制子元素: 水平或垂直排成一行控制子元素的对齐方式控制子元素的高度／...

you_De 2019-08-01 16:57 评论0 收藏0
CSS中各种布局的背后(*FC)

摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 评论0 收藏0
FlexBox学习弹性布局_019

摘要：学习弹性布局模型，通常被称为，是一种一维的布局模型。任何空间分布都将在该行上发生，而不影响该空间分布的其他行。同时，布局空白对于元素的对齐行为也是很重要的。这会使该元素延展，并占据此方向轴上的布局空白。 FlexBox学习弹性布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一维...

warnerwu 2019-08-02 16:09 评论0 收藏0
FlexBox学习弹性布局_019

摘要：学习弹性布局模型，通常被称为，是一种一维的布局模型。任何空间分布都将在该行上发生，而不影响该空间分布的其他行。同时，布局空白对于元素的对齐行为也是很重要的。这会使该元素延展，并占据此方向轴上的布局空白。 FlexBox学习弹性布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一维...

MyFaith 2019-08-30 15:43 评论0 收藏0