flex布局中flex-shrink的计算规则

下面代码来自MDN

html部分:

<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
<p>the width of D is not the same as A‘s</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

css部分:

#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}

效果部分:

以上代码描述,id为content容器中有5个小盒,content容器定宽500px,

每个小盒的初始内容宽度是120px + 边框3px * 2 = 126px,

现在前三个小盒flex-shrink数值为1,后两个数值为2,下面计算:

小盒初始宽度总和与content容器宽度差值

  Δ = 126 * 5 - 500 = 130

收缩指数

  Δt = 130 ÷ (1*3 + 2*2)

前三个盒子宽度

  box = 126 - Δt

后两个盒子宽度

  box1= 126 - 2Δt

*总结:

  1、flex-shrink仅在内容默认宽度之和大于容器的时候才会有效  

  2、容器内子容器的content、border、padding都要参与计算才能得到正确的收缩指数值

  3、border和padding即使参与了计算,但宽度始终不会改变,假如收缩后的总宽度仍然超过容器宽度,则会超出盒子,即使设置box-sizing为border-box也不能使border和padding收缩

原文地址:https://www.cnblogs.com/threeEyes/p/10468662.html

时间: 2024-10-07 22:05:15

flex布局中flex-shrink的计算规则的相关文章

flex布局中flex-basis|flex-grow|flex-shrink

flex布局中flex-basis|flex-grow|flex-shrink flex-grow.flex-shrink.flex-basis这三个属性的作用是:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素的空间的. 其中,这三个属性都是在子元素上设置的.注:下面讲的父元素,指以flex布局的元素(display:flex). flex-basis 该属性来设置该元素的宽度.当然,width也可以用来设置元素宽度.如果元素上同时设置了width和flex-basis,那么fle

flex布局中 align-items 和 align-conten t的区别

参考资料:http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content 看了很多翻译的技术文档,这一块都讲得模糊不清,看到stackoverflow上有人提问后的回答觉得十分清晰,特来分享,有不当之处欢迎指正. align-items The align-items property applies to all flex containers, a

flex布局中transform出错

在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要position:relative html伪代码 <flex> <div> <div> <div> <animation> css伪代码 animation{ position:relative; }

[ css 弹性盒子模型 align-item 属性 ] 弹性盒子模型flex布局中align-item属性讲解及实例演示的区别

说明: 本属性适用于:flex容器 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式 实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>align-items_CSS参考手册_web前端开发参考手册系列</title> <meta name="

flex布局中同一行内对齐左右两端

之前实现左右对齐都是用的float,但是用float经常会出现浮动影响,有时候清浮动也不能完全消除影响,后来用了flex之后觉得挺好用,不存在这个问题,所以现在都是能用flex就用flex,以下是用flex替代float实现左右对齐的代码 <div class="lh" style="padding: 20px 0;"> <div style="display: flex;flex-flow: row nowrap;justify-con

[ css 弹性盒子模型 flex-shrink 属性 ] 弹性盒子模型flex布局中flex-shrink属性讲解及实例演示的区别

根据弹性盒子元素所设置的收缩因子作为比率来收缩空间 实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>-webkit-flex-basis_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" conten

[ css 弹性盒子模型 flex-basis 属性 ] 弹性盒子模型flex布局中flex-basis属性讲解及实例演示的区别

设置或检索弹性盒伸缩基准值: 如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间 计算值 – 绝对数:在flex-container主方向大小不足以容纳flex items的flex-basis总和时,浏览器会自动缩小它们 实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <

[ css 弹性盒子模型 flex-grow 属性 ] 弹性盒子模型flex布局中flex-grow属性讲解及实例演示的区别

根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>-webkit-flex-basis_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" cont

[ css 弹性盒子模型 align-content 属性 ] 弹性盒子模型flex布局中align-content属性讲解及实例演示的区别

说明: 本属性适用于:多行的弹性盒模型容器 当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似.请注意本属性在只有一行的伸缩容器上没有效果 实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /&