flex布局对行内子元素的影响

一、正常使用

正常情况下，行内元素设置宽高是没有效果的，行内元素会根据其内容大小自动布局。

请看以下代码和效果

 .app {
            width: 100%;
            height: 0;
            background-color: #3CC51F;
            padding-bottom: 40%;
            position: relative;
        }
        .icon {
            width: 50px;
            height: 50px;
            border: 2px solid #F00;
        }

 <div class="app">
       <i class="icon"></i>
        <i class="icon"></i>
    </div>

效果如下，可见对行内 设置了50px的宽高是没有效果的

二、使用flex布局后的效果

如果我们对app使用flex布局，这时候50px的宽高就失效了。 

.app {
            width: 100%;
            height: 0;
            background-color: #3CC51F;
            padding-bottom: 40%;
            position: relative;
            display: flex;
        }

使用这种特性，有时候很有用的，比如轮播图自定义前一页和后一页的按钮，直接给这2个行业元素设置图片背景就可以了。