flex溢出的文字换行,flex布局
前言
一个小女孩问我关于flex text溢出的问题。事后觉得这个问题挺有意思，就通过一个简单的学习分享给大家。
问题
以一个简化的css和html为例
样式* { margin:0；填充：0；} .box { display:flex；高度：200px边距-顶部：20px宽度：400px边距：20px auto 0 auto} .左{宽度：100px身高：100%；背景：红色；} .right { flex:auto；身高：100%；背景：蓝色；颜色：# fff} .text {溢出：隐藏；空白：nowrap文本溢出：省略号；}/style div class= box div class= left 123/div div class= right p class= text 这是一个很长很长很长很长很长很长的文本，这是一个很长很长很长很长很长很长很长的文本/p/div/div class= box style= background:green 。普通的box/div有一个flex容器，包括两个容器。在右边的容器中，我们想要的是正常显示，文本显示省略号，但总是事与愿违。如下图所示，左边的红色区域被压缩，蓝色区域被拉伸，父容器被拉伸。
那么，如何才能解决这个问题呢？
解决方法
有三种方法，如下所示
蓝色容器设置溢出：隐藏蓝色容器设置宽度：0蓝色容器设置最小宽度：0第一个溢出超过截断，很好理解。让我们看看剩下的两个。
法二 width
二、先看flex属性。
！-缩写-flex:auto；伸缩增长：1；伸缩：1；弹性基础：自动；-默认值为-flex:0 1 auto；Flex: auto是flex: 0 1 auto的缩写
在…之中
Flex-grow:表示放大比例flex-shrink:表示缩小比例flex-basis:作用于子元素主轴的宽度属性，优先级高于默认的宽度/高度。这个属性决定了CSS如何分配容器中可伸缩项的初始大小。上述属性是弹性基础。弹性基础的值是content \width\
Flex-basis:检索项目的宽度或高度值作为flex-basis的值。如果宽度或高度值为auto，则flex-basis设置为content，即基于flex的元素的内容会自动调整大小。
注意：设置0%和0%的弹性基础是有区别的。如果flex-basis的值是一个百分比，并且没有显式设置其flex容器的大小，则flex-basis的值将被解析为内容，实际的大小将根据flex子项的内容(指其子元素的大小)来计算。在大多数情况下，效果与max-content的值一致，这意味着其主轴的初始值将是其子元素的长度。
这里，蓝色容器的flex-basis是默认值0。项目的总宽度小于集装箱的宽度，其计算方法如下：
项目总宽度100px + 0px = 100px
待分配宽度400px - 100px = 300px
放大比例0 + 1 = 1 , 这是项目的flex-grow之和
每个项目都将获得剩余的增长空间。
红色容器得到0/1 * 300px = 0，最终宽度100px + 0px = 100px
蓝色容器得到 1/1 * 300px = 300px，最终宽度300px
将蓝色容器的宽度设置为0，并验证我们的结果。结果如下，解决是成功的。
法三 min-width
通常，最小宽度属性的默认值为0，但是Flexbox容器中flex项目的最小宽度属性的默认值为auto，这可以为Flexbox布局指示更合理的默认性能。将最小宽度设置为0，宽度的默认值为自动。此时，收缩至适合算法将用于计算宽度(该算法也将用于参考文献3中描述的flexbox)。算法如下：
其中宽度=min (max(首选最小宽度，可用宽度)，首选宽度)
最小宽度(首选最小宽度)是最小宽度的可用宽度，即包含块的宽度减去边距、边框、填充和所有相关滚动条。首选宽度，即内容框的宽度，计算如下：(816是浏览器当时获得的宽度)
min(max(0, 400px - 100px), 816px) = 300px
因此，设置最小宽度也可以解决我们的问题。
flex再算一题
html的内容如下。我们需要计算左边和右边容器的宽度。
风格。box { display:flex；高度：200px边距-顶部：20px宽度：400px边距：20px auto 0 auto} .item-1 {背景：红色；宽度：200px伸缩：2；} .item-2 {背景：蓝色；宽度：300px伸缩：3；}/style div class= box div class= item-1 设置为200px，实际169.23/div div class=item-2 设置为300px，实际230.77/div/div开始计算。当项目的总宽度超过父容器时，此时需要通过flex-shrink进行计算。
首先计算项目总的虚拟总宽度=每个项目flex-basic * flex-strink之和。这里设置了左右两个项目的宽度，所以flex-basis=width然后计算单个项目的比例P=flex * flex-strink/Total。最后计算要减去的项目规模=实际超额* Ptotal=200 * 2 300 * 3=1,300。
P1=200 * (2/VS)
P2=300 * (3/VS)
最后：
项目-1的宽度为：200-(500-400) * P1=169.23px
第二项的宽度为：300-(500-400)* P2=230.77像素
参考文献
[flex-Basic][Shrink-to-Fit算法] [flex初始大小] [flex-更多计算案例]就是这样。本文介绍了如何解决flex文本溢出的问题。有关Flex文本溢出的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。