CSS3小问题-flex布局子元素高度设置无效

发表于 更新于 分类于 阅读次数：

前言

今天在写 flex 自适应布局的时候，出现了一个问题：flex 布局子元素高度设置无效。

我的页面布局是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="father">
  <div class="son-1">一串很长的文字</div>
  <div class="son-2">一个固定的大小</div>
</div>

<style>
  .father {
    display: flex;
    height: 120px;
    aligin-item: center;
  }
  .son-1 {
    color: red;
  }
  .son-2 {
    width: 20px;
    height: 20px;
  }
</style>

原因

当指定 view 为 flex 布局后，给子元素定义width和height是不起效果的。原因：定义为 flex 布局元素的子元素，自动获得了flex-shrink的属性，这个属性是什么意思呢？就是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为 1 时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为 0 时，表示大家都不缩小适应。

解决方法

所以，倘若给父元素设置了 flex 布局后.

  1. 若要其子元素的 width 和 height 有效果，必须给子元素设置flex-shrink为 0。
  2. 将设置flex:1 1 auto;的元素的宽设置为width:0;