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

前言

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

我的页面布局是这样的

<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;