flex-basic与width关系深入研究实例页面

效果：

box-sizing均是border-box

我仅设置了width:100px，没有设置了flex-basis:100px。

我没有设置width：100px，但是设置了flex-basis:100px。

我设置了width：100px，同时设置了flex-basis:100px

代码：

CSS代码：

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

HTML代码：

<by-zhangxinxu>
    <item-zxx>我仅设置了width:100px，没有设置了flex-basis:100px。</item-zxx>
    <item-zxx>我没有设置width：100px，但是设置了flex-basis:100px。</item-zxx>
    <item-zxx>我设置了width：100px，同时设置了flex-basis:100px</item-zxx>
</by-zhangxinxu>