flex-basic与width的异同演示实例页面

回到相关文章 »

效果：

1. flex-basis:100px

项目1

项目2

项目3

项目4

2. width:100px

项目1

项目2

项目3

项目4

3. width:200px + flex-basis:100px

项目1

项目2

项目3

项目4

//zxx: width:200px完全被无视

代码：

CSS代码：

by-zhangxinxu {
    display: flex;
}
item-basis,
item-width,
item-basis-width {
    padding: 1em;
    border: 1px solid deepskyblue;
    color: deepskyblue;
    box-sizing: border-box;
    /*flex-grow: 1;*/
}
item-width {
    width: 100px;
}
item-basis {
    flex-basis: 100px;
}
item-basis-width {
    width: 200px;
    flex-basis: 100px;
}

HTML代码：

<h4>1. flex-basis:100px</h4>
<by-zhangxinxu>
    <item-basis>项目1</item-basis>
    <item-basis>项目2</item-basis>
    <item-basis>项目3</item-basis>
    <item-basis>项目4</item-basis>
</by-zhangxinxu>
<h4>2. width:100px</h4>
<by-zhangxinxu>
    <item-width>项目1</item-width>
    <item-width>项目2</item-width>
    <item-width>项目3</item-width>
    <item-width>项目4</item-width>
</by-zhangxinxu>
<h4>3. width:200px + flex-basis:100px</h4>
<by-zhangxinxu>
    <item-basis-width>项目1</item-basis-width>
    <item-basis-width>项目2</item-basis-width>
    <item-basis-width>项目3</item-basis-width>
    <item-basis-width>项目4</item-basis-width>
</by-zhangxinxu>