flex布局使div长宽比例变形是什么问题？

Question

demo链接：http://jsrun.net/qLLKp/edit

上面是flex布局，下面是float布局

为什么flex布局会把形状变形呢？

但是浮动布局无法使文字左边对齐

我要达到下面这个效果要怎么写代码呢？

Answer 1

i {
    ...
    flex-shrink: 0;
    ...
}

加上这个

Answer 2

给i标签设置一个固定宽度就没问题了：flex:0 0 16px