您现在的位置是：网站首页> 编程资料编程资料

控制Flex子元素在主轴上的比例的方法flex布局被子元素撑开如何保持内容不超出容器的方法

2023-10-19 224人已围观

简介这篇文章主要介绍了控制Flex子元素在主轴上的比例的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

背景

flex布局更有效的实现对齐，空间分配。最近又学习下flex子元素的尺寸计算规则，主要是flex-grow, flex-shrink的计算规则的学习。

一、基本概念

1.1 主轴(Main axis)

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

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

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

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容器主轴尺寸 = 600px
元素one的希望尺寸 = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
元素two的希望尺寸 = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 190px
剩余自由空间 = 600px - 150px - 190px = 260px，即存在正剩余空间。

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

SUM_flex_grow = 1 + 2 = 3，即大于1 ，一个蛋糕不够分，只能按照比例分了。
元素one的实际增长尺寸 = 260px * 1 / Max(1, 1 + 2) = 260px * 1 / (1 + 2) = 86.67px
元素two的实际增长尺寸 = 260px * 2 / Max(1, 1 + 2) = 260px * 2 / (1 + 2) = 173.33px

3.3 Demo2：SUM(flex-grow) < 1

 function demo3() { return ( <>One
Two
 ) }

解析：

计算剩余自由空间

flex容器主轴尺寸 = 600px
元素one的希望尺寸 = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
元素two的希望尺寸 = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 190px
剩余自由空间 = 600px - 150px - 190px = 260px，即存在正剩余空间。

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

SUM_flex_grow = 0.2 + 0.3 = 0.5，即小于1 ，一个蛋糕能满足大家需求，直接分给各个flex子元素。
元素one的实际增长尺寸 = 260px * 0.2 / Max(1, 0.5) = 260px * 0.2 = 52px
元素two的实际增长尺寸 = 260px * 0.3 / Max(1, 0.5) = 260px * 0.3 = 78px

注意：

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

3.3 Demo3 跟max-width冲突

留意该栗子中：

元素one, two, threebox-sizing=border-box
元素one的max-width=150px

 function demo4() { return ( <>One
Two
Three
 ) }

解析：

计算剩余自由空间

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子元素增长尺寸

SUM_flex_grow = 1 + 2 + 3 = 6，即大于1 ，一个蛋糕不够分，只能按照比例分了。。
元素one的增长尺寸 = 390px * 1 / Max(1, 6) = 390px * 1/6 =65px

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

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

flex容器主轴尺寸 =800px - 元素one占领的尺寸（150px - 10px） = 640px
剩余空间 = 640px - 150px - 150px = 340px
SUM_flex_grow = 2 + 3 = 5
元素two的增长尺寸 = 340px * 2 / Max(1, 5) = 340px * 2 / 5 = 136px
元素three的增长尺寸 = 340px * 3 / Max(1, 5) = 340px * 3 / 5 = 204px

3.4 小结：

计算剩余自由空间永远是第一步；
增长是个绝对值，即flex子元素会增加个绝对值（这是跟flex-shrink不同的地方）；
当遇到max-属性冲突时，即元素one吃不完的蛋糕会放入总蛋糕中，由后面的flex子元素重新分配。

四、深入了解flex-shrink

4.1 规则

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

flex-shrink: 0.2 表示希望分摊负自由空间的20%；
flex-shrink: 1 表示希望分摊100%负自由空间（够兄弟，其他兄弟不用分摊）；
flex-shrink: 2 表示希望分摊200%负自由空间（分摊的态度很明确）。

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

计算flex子元素的content矩形（内容矩形）在主轴尺寸和 flex-shrink乘积值，记作A；
累加步骤1的乘积值，记作SUM_A；
被分摊的负自由空间 valid_negative_free_space = negative_free_space * Min(1, SUM(flex-shrink))
每个flex子元素的收缩值 = valid_negative_free_space * A / SUM_A。

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

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

4.2 Demo1：“减少贫富差距”

 function demo5() { return ( <>One
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                
                
                                            上一篇：CSS 样式的使用方式、选择器 css3的focus-within选择器的使用CSS选择器中的正则表达式使用巧用CSS属性值正则匹配选择器(小技巧)css选择器四大类：基本、组合、属性、伪类css复杂选择器及css字体样式、颜色属性详解详解如何使用CSS3中的结构伪类选择器和伪元素选择器CSS3 新增选择器的实例css3 伪类选择器快速复习小结盘点CSS Selectors Level4中新增的选择器CSS 中的六个重要选择器(三秒就可以记住)
                                                                下一篇：天天飞车怎么样无限吸金隐身的方法_手机游戏_游戏攻略_
                                    
            
        
        
            相关内容
            
                                    CSS 样式的使用方式、选择器 css3的focus-within选择器的使用CSS选择器中的正则表达式使用巧用CSS属性值正则匹配选择器(小技巧)css选择器四大类：基本、组合、属性、伪类css复杂选择器及css字体样式、颜色属性详解详解如何使用CSS3中的结构伪类选择器和伪元素选择器CSS3 新增选择器的实例css3 伪类选择器快速复习小结盘点CSS Selectors Level4中新增的选择器CSS 中的六个重要选择器(三秒就可以记住)
                                    CSS实现宽高等比自适应容器的方法CSS背景图片固定宽高比自适应调整的实现方法CSS 实现的图片宽高自适应固定边框CSS实现的图片宽高自适应固定边框CSS实现宽度自适应宽高16:9的矩形的示例
                                    前端项目修改默认滚动条样式(小结)css 设置overflow:scroll 滚动条的样式 CSS3改变浏览器滚动条样式详解如何自定义CSS滚动条的样式纯css修改浏览器scrollbar滚动条样式示例CSS 设置滚动条样式的实例代码配置H5的滚动条样式的示例代码详解css3自定义滚动条样式写法CSS3自定义滚动条样式的示例代码纯CSS改变webkit内核浏览器的滚动条样式
                                    css骚操作表单验证功能的实现代码纯CSS实现表单验证的示例代码使用HTML5和CSS3表单验证功能纯CSS3实现表单验证效果(非常不错)jQuery+CSS3实现的留言表格表单内容验证特效源码htm5+CSS3实现的表单美化带输入验证特效源码
                                    详解用backgroundImage解决图片轮播切换CSS3实现炫酷的切片式图片轮播效果手把手教你用纯css3实现轮播图效果实例纯CSS3实现图片无间断轮播效果
                                    css position属性为absolute时其百分值的计算CSS position:absolute全面了解css中position属性使用详解css中position属性(absolute|relative|static|fixed)概述及应用CSS position属性absolute relative等五个值的解释
                                    CSS实现雨滴动画效果的实例代码css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
                                    运用CSS methodologies去实现模块化的方法示例
                                    css 多列布局解决方案css flex几种多列布局CSS实现多行多列的布局的实例代码使用CSS3实现多列布局与多背景的技巧CSS多列布局实现方法大全纯CSS无hacks的跨游览器自适应高度多列布局 推荐CSS 多列布局问题简单解决方案CSS教程:使用ul进行网页的多列布局-CSS教程-网页制作-网页教学网
                                    魔物狩猎者 关于怪物性格心得_手机游戏_游戏攻略_

您现在的位置是：网站首页> 编程资料编程资料

控制Flex子元素在主轴上的比例的方法flex布局被子元素撑开如何保持内容不超出容器的方法

相关内容

点击排行

本栏推荐

猜你喜欢