flex-basic与盒模型样式表现实例页面

CSS代码：

by-zhangxinxu {
    display: flex;    
}
item-zxx {
    padding: 1em;
    border: 1em solid deepskyblue;
    color: deepskyblue;
    outline: 1px dashed #fff;
}
item-zxx:nth-child(1) {
    width: 100px;    
}
item-zxx:nth-child(2) {
    width: 100px;    
    box-sizing: border-box;
}
item-zxx:nth-child(3) {
    flex-basis: 100px;
}
item-zxx:nth-child(4) {
    flex-basis: 100px;    
    box-sizing: border-box;
}

HTML代码：

<by-zhangxinxu>
    <item-zxx>我设置了width:100px</item-zxx>
    <item-zxx>我设置了width:100px，同时box-sizing: border-box</item-zxx>
    <item-zxx>我设置了flex-basis:100px</item-zxx>
    <item-zxx>我设置了flex-basis:100px，同时box-sizing: border-box</item-zxx>
</by-zhangxinxu>