CSS flex属性综合应用布局效果实例页面

CSS代码：

.container {
    display: flex;
    border: 2px dashed crimson;    
}
.container item {
    border: 2px solid deepskyblue;    
}
.zhang {
    flex: 0 2 100px;    
}
.xin {
    flex: 0 1 100px;    
}
.xu {
    flex: 0 1 100px;    
}
.shuai {
    flex: 3 0 20px;    
}
.ge {
    flex: 2 0 20px;    
}

HTML代码：

<div class="container">
    <item class="zhang">范张</item>
    <item class="xin">范鑫</item>
    <item class="xu">范旭</item>
    <item class="shuai">范帅</item>
    <item class="ge">范哥</item>
</div>