资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

如何控制Flex子元素在主轴上的比例

如何控制Flex子元素在主轴上的比例？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

鲁山网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。成都创新互联于2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

一、基本概念

如何控制Flex子元素在主轴上的比例

1.1 主轴(Main axis)

定义了flex元素布局起始点和方向，flex子元素在主轴上依次放置。

主轴有4个方向，通过flex-direction指定：

  • row

水平方向，从左到右，默认的

  • row-reverse

水平方向，从右到左

  • column

垂直方向，从上到下

  • column-reverse

垂直方向，从下到上

1.2 主轴的尺寸（Main axis size）

就是flex容器content矩形（不包含padding, border, margin区域）在主轴方向的尺寸。

1.3 交叉轴（Cross axis）

交叉轴就是跟主轴锤子的方向，主要用于flex元素的对齐。

1.4 交叉轴的尺寸（Cross axis size）

就是flex容器content矩形（不包含padding, border, margin区域）在Cross轴方向的尺寸。

1.5 flex盒模型（flex box）

display为flex，inline-flex，的元素，也叫flex容器。

1. flex容器包含的不仅是flex元素，也包含空白空间。

2. 涉及的CSSflex-directionflex-wrapflex-flow

  • flex-direction

  • flex-wrap

  • flex-flow

flex-direction和 flex-wrap的简写。

  • justify-content

控制flex容器内容（flex元素和空白空间）在主轴方向对齐。注意区分align-items。

  • align-content

控制多行flex容器个行的对齐方式。

  • align-items

控制flex容器内容（flex元素和空白空间）在交叉轴方向对齐。

Tip：

1、这些CSS属性都是有相关性的：

首页先指定flex容器的主轴方向(flex-direction), 如果flex子元素超过在主轴 尺寸，那就涉及是否换行（flex-wrap）。如果没有超过主轴尺寸，那就涉及行内对齐（justify-content）, 如果存在多行每个行直接也要对齐（align-content）。

2、可能比较容易混淆 justify-content，align-content，align-items。

记住content是指flex元素和空白空间，items指的是flex元素。这样就容易就是这三个属性的用处了。

1.6 flex元素(flex items)

1. 语法

flex box的子元素，不包含流外子元素（ absolute, fix元素），但是包含float元素。

flex子元素相邻的margin不会发生合并。

float元素作为flex子元素时，float属性无效（因为要参与flex布局，不是流式布局）。

2. 涉及CSS属性

  • flex-basis
     

指定flex元素在主轴方向上占用flex容器的尺寸，默认为auto，即以flex元素的尺寸作为其占用的尺寸（主轴是row取值flex元素的宽度，主轴是column取值flex元素的高度），根据该属性计算是否有空余空间。

注意：flex元素占用的尺寸跟flex-basis有关，跟元素的宽高没直接关系。

  • flex-grow
     

指定各个flex元素弹性增长因数，即占用正空白空间（positive free space）的比例份额数量。0值（默认值）表示不占用空白空间

  • flex-shrink
     

指定各个flex元素弹性收缩因数，即分配负空白空间（negative free space）的比例份额数量。但是元素不能无限收缩为0，也不能小于元素的最小尺寸（如min-width或者min-height）。

  • flex

flex-grow flex-shrink flex-basis简写

  • align-self

调整自己在交叉轴的对齐方式，只有在不撑满交叉轴时，这个属性才有效。

  • order

指定顺序

二、计算自由空间和flex-basis

flex子元素在主轴上的比例依赖这三个CSS属性：

  • flex-basis

  • flex-grow

  • flex-shrink

其中：
flex-basis + flex-grow组合控制着伸
flex-basis + flex-shrink组合控制着缩
所以要确定flex子元素在主轴上的比例，首先要确定使用哪种组合。

2.1 规则

flex-basis 属性指定在任何空间分配发生之前初始化flex子元素的尺寸，更确切的说flex-basis 属性指的flex子元素盒模型（box-sizing）的尺寸，所以跟flex子元素width（height）取值逻辑类似，如果box-sizing=content，则flex-basis也不包含padding和border区域。

2.2 剩余自由空间计算

自由空间计算
flex容器在主轴方向的content矩形的尺寸

期望自用空间
在计算flex容器的自由空间前要先统计flex子元素占用的尺寸，注意这里指的是flex子元素的margin区域的尺寸，并且相邻的flex子元素margin是不会发生合并的。

剩余自由空间计算 = 自由空间计算 - 期望自用空间

正自由空间
正值的剩余自由空间，此时采用flex-basis + flex-grow组合。

负自由空间
负正值的剩余自由空间，此时采用flex-basis + flex-shrink组合。

三、深入了解flex-grow

3.1 规则

如果存在正自由空间（positive free space），则采用flex-basis + flex-grow组合计算flex子元素在主轴上的比例。把正自由空间比作蛋糕的话，flex-grow表示希望分得蛋糕的量：

  • flex-grow: 0.2 表示希望获得20%的蛋糕；

  • flex-grow: 1 表示希望获得100%整个蛋糕（有点过分啊，不考虑其他兄弟）；

  • flex-grow: 2 表示希望获得200%的蛋糕（这是明抢啊，态度很明确）。

但毕竟蛋糕就一个，flex容器尽量满足felx子元素的要求，采用一种简单的按照比例分蛋糕方式：

  • 累加flex子元素的flex-grow得出总和，简称SUM_flex_grow；

  • 如果SUM_flex_grow=0，则不发生弹性增长，结束；

  • flex子元素增长的尺寸 = 正自由空间尺寸 * flex_grow / Max(SUM_flex_grow, 1)。

3.2 Demo1：按照比例分蛋糕

function demo1() {
    return (
        <>
            
                One
                Two
            
            {`                 .flex {                     display: flex;                     width: 600px;                     outline: 1px dashed red;                 }                 .item {                     padding: 10px;                     border: 10px solid #666666;                 }             `}              ) }

如何控制Flex子元素在主轴上的比例

解析：

计算剩余自由空间

计算各个flex子元素增长尺寸

3.3 Demo2：SUM(flex-grow) < 1

function demo3() {
    return (
        <>
            
                One
                Two
            
            {`
                .flex {
                    display: flex;
                    width: 600px;
                    outline: 1px dashed red;
                }
                .item {
                    padding: 10px;
                    border: 10px solid #666666;
                }
            `}
        
    )
}

如何控制Flex子元素在主轴上的比例

解析：

计算剩余自由空间

计算各个flex子元素增长尺寸

注意：

如果SUM(flex-grow)小于1，此时剩余空间没有全部分配给各个flex子元素。

3.3 Demo3 跟max-width冲突

留意该栗子中：

function demo4() {
    return (
        <>
            
                One
                Two
                Three
            
            {`
                .flex {
                    display: flex;
                    width: 800px;
                    outline: 1px dashed red;
                }
                .item {
                    padding: 10px;
                    border: 10px solid #666666;
                    box-sizing: border-box;
                }
            `}
        
    )
}

如何控制Flex子元素在主轴上的比例

解析：

计算剩余自由空间

flex容器主轴尺寸 = 800px

元素one的希望尺寸 = 100px(flex-basis) + 10px(margin-right) = 110px
box-sizing=border-box

元素two的希望尺寸 = 150px(flex-basis) = 150px
box-sizing=border-box

元素three的希望尺寸 = 150px(flex-basis) = 150px
box-sizing=border-box

剩余自由空间 = 800px - 110px - 150px - 150px = 390px，即存在正剩余空间。

计算各个flex子元素增长尺寸

这样元素one的尺寸就是100px + 65px = 165px，大于其max-width=150px指定的最大值，所以最终元素one的尺寸是150px。即元素one吃不完分配的蛋糕，把吃不完的蛋糕还回去了，让其他兄弟多分些（先抛个问题：这些吃不完的蛋糕如何分配呢？）。

元素two和元素three重新分配剩下是自由剩余空间，即回到步骤1重新计算。

3.4 小结：

四、深入了解flex-shrink

4.1 规则

如果存在负自由空间（negative free space），则采用flex-basis + flex-shrink组合计算Flex子元素在主轴上的比例。flex-shrink取值表达了个flex子元素贡献的愿望：

flex容器都感动哭了，但为了照顾各个flex子元素的感受，采用了一个“更合理”的分摊规则：

计算的规则比上面的要复杂一些，不是简单的切分negative-free-space。收缩量不仅依赖flex-shrink,还依赖flex-basis。这样做只是为了“更合理”，即相同的flex-shrink情况下，flex-basis越小的flex元素收缩的越慢（跟纳税一样，收入越高交的越多）。

注意： 如果flex-shrink总和小于1，则表示部分负自由空间被分摊了（即有些尺寸没有被收缩）。

4.2 Demo1：“减少贫富差距”

function demo5() {
    return (
        <>
            
                One
                Two
            
            {`
                .flex {
                    display: flex;
                    width: 300px;
                    outline: 1px dashed red;
                }
                .item {
                    padding: 10px;
                    border: 10px solid #666666;
                }
            `}
        
    )
}

如何控制Flex子元素在主轴上的比例

解析（过长跟flex-grow过程类似）：

计算剩余自由空间

计算各个flex子元素收缩尺寸

4.2 Demo: SUM(flex-shrink) < 1

function demo8() {
    return (
        <>
            
                One
                Two
            
            {`
                .flex {
                    display: flex;
                    width: 300px;
                    outline: 1px dashed red;
                }
                .item {
                    padding: 10px;
                    border: 10px solid #666666;
                }
            `}
        
    )
}

如何控制Flex子元素在主轴上的比例

flex子元素超出了flex容器。

解析：

计算剩余自由空间

计算各个flex子元素收缩尺寸

4.4 Demo3: box-sizing =border-box

留意：元素one, twobox-sizing= border-box

function demo6() {
    return (
        <>
            
                One
                Two
            
            {`
                .flex {
                    display: flex;
                    width: 200px;
                    outline: 1px dashed red;
                }
                .item {
                    padding: 10px;
                    border: 10px solid #666666;
                    box-sizing: border-box;
                }
            `}
        
    )
}

如何控制Flex子元素在主轴上的比例

解析：

计算剩余自由空间

计算各个flex子元素收缩尺寸

4.5 Demo5 跟min-width冲突

留意该栗子中：

元素one的min-width=60px

function demo7() {
    return (
        <>
            
                One
                Two
                Three
            
            {`
                .flex {
                    display: flex;
                    width: 300px;
                    outline: 1px dashed red;
                }
                .item {
                    padding: 10px;
                    border: 10px solid #666666;
                }
            `}
        
    )
}

解析：

计算剩余自由空间

计算各个flex子元素收缩尺寸

元素two和元素three重新分配剩下是自由剩余空间，即回到步骤1重新计算。

4.6 小结

看完上述内容，你们掌握如何控制Flex子元素在主轴上的比例的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


当前标题：如何控制Flex子元素在主轴上的比例
网站路径：http://cdkjz.cn/article/jepcpc.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
郫县门窗定制彭州做网站成都网站优化光华服务器托管彩乐斯贸易网页设计制作成都企业网站改版重庆企业网站建设微信小程序开发小谭网创广告

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图