咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

常见问题

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何控制Flex子元素在主轴上的比例-创新互联

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

创新互联拥有网站维护技术和项目管理团队，建立的售前、实施和售后服务体系，为客户提供定制化的成都网站制作、成都网站建设、网站维护、成都服务器托管解决方案。为客户网站安全和日常运维提供整体管家式外包优质服务。我们的网站维护服务覆盖集团企业、上市公司、外企网站、电子商务商城网站建设、政府网站等各类型客户群体，为全球上千余家企业提供全方位网站维护、服务器维护解决方案。

一、基本概念

如何控制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://cqcxhl.com/article/gggsp.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
网站建设 网站设计 网站制作 小程序
联系我们
公司地址 人才招聘
成都 重庆
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：重庆市南岸区弹子石腾龙大道58号2栋21-6
版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4
在线咨询
服务热线
服务热线：028-86922220
TOP