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 布局后,给子元素定义widthheight是不起效果的。原因:定义为 flex 布局元素的子元素,自动获得了flex-shrink的属性,这个属性是什么意思呢?就是告诉子元素当父元素宽度不够用时,自己调整自己所占的宽度比,这个flex-shrink设置为 1 时,表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为 0 时,表示大家都不缩小适应。

解决方法

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

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