请教几个flex的问题

哦莫喜洛咦
  • 4
新手上路,请多包涵
*{
  padding: 0;
  margin: 0;
}
.box{
  display: flex;
  flex-direction: column;
  height: 600px;
}
.b-header{
  height: 100px;
  background: #4169E1;
}
.b-container{
  flex: 0 1 auto;
  overflow-y: auto;
  background: #76D5FF;
}
<div class="box">
  <div class="b-header">
    b-header
    <!-- <p style="height: 200px;">inner-header</p> -->
  </div>
  <div class="b-container">
    b-container
    <p style="height: 2000px;">inner-container</p>
  </div>
</div>
  1. 在设置了display:flex的盒子里,子元素如果没有设置控制交叉轴的flex的属性,浏览器会不会有默认的值作为显示处理?
  2. 这个例子,为什么b-header设置了100px的高度无效,会被压缩,最小到内容大小?难道会与问题1有关吗?
  3. 如果把 b-header里的p标签 显示出来,为什么 b-header的高度又正常,不被压缩了?这里的flex-shrink是怎么计算的权重?
  4. 如果 b-container 的flex属性改为 flex:1 0 auto;height:0; 为什么与 flex:1 1 0%的表现形式一样,flex-basis按不是子元素的内容高度计算吗,与flex元素的高度难道有联系吗?
回复
阅读 1.3k
1 个回答
Infinite
  • 1.1k
✓ 已被采纳

首先问题1和2 MDN Flex布局 都可以解答,
问题1,会有以下默认值flex-shrink: 1; flex-basis: auto; flex-wrap: nowrap;

问题2,文章中有说明,当内容超过了容器,会按flex-shrink进行压缩,由于默认都是1,所以大约计算可知b-header高度为 100/(100+2000+20) * 600 = 28.3,可以通过浏览器查看一下

问题3,可以看下张鑫旭的Oh My God,CSS flex-basis原来有这么多细节这篇文章。以下是节选:

flex-basis值是auto的时候,width属性值也是被打入冷宫的,只是,这个时候,由于后宫放权,所以,冷宫也是有影响力的。什么意思呢?

flex-basis:auto的含义是,子项的基本尺寸根据其自身的尺寸决定。而这个自身尺寸与下面这几个方面有关:

  • box-sizing盒模型(这个已经介绍过了);
  • width/min-width/max-width等CSS属性设置;
  • content内容(min-content最小宽度);

这里height的作用是限制了子元素p的高度,从而达到了间接影响flex-basis计算。也就是flex-basis:auto时是根据内容来计算的,但是由于b-header的height限制了内容的高度,也就是限制了p的高度,然后计算flex-basis:auto时只有文本和p可见的部分。这里你可以把pheight 设置的小一点,你可以看到b-header的height并没有作用

问题4的话,看张鑫旭的那篇文章应该能够解答

所以,用flex的时候,需要用width/height时最好直接用 flex-basis ,混用的话,还是有许多奇怪的问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏