需求

下面的列表有两种思路，一个是用inline-block来做，一个是用flex。

我这里两种都试了一下，代码其实差不多的，总结几个注意点。

注意点

inline-block/flex会触发BFC

其实这里margin塌陷是我们希望的，那就只需要一个margin: 12px就齐活。

但是没办法有BFC，margin是会叠加的，这就只能在偶数个元素上加一个类来把margin-left消掉了。我在Vue里是这么做的。

<div class="content">
    <div
        v-for="(item, idx) in selected"
        :key="idx"
        class="list-item"
        :class="{'right-item': idx % 2}"
        :style="{width: itemWidth + 'px'}"
    >
        {{item}}
        <div class="del">
        </div>
    </div>
</div>

每行只有两个item的实现

设计稿上所有的间隔都是12px，我期望实现在所有宽度上都能准确地显示两个条目。

核心是需要计算条目的宽度，为了方便，我把整体的width作为一个prop来让用户指定并给一个默认值。

这个项目是用TS写的，稍后会写一篇Vue + TS的工程实践总结，非常得爽，墙裂安利

import { Vue, Component, Prop, Model } from 'vue-property-decorator'

@Component
export default class selectedList extends Vue {
    @Prop({ type: Number, default: 480 }) width
    get itemWidth () {
        return (this.width - 12 * 3) / 2
    }
}

这个元素记得用boder-box，不然计算出来的宽度不是总宽度

border-box的坑

这里单单计算width是不行的，会分行，就像这样。

border-box中border是占宽度的，所以需要加一个margin: -1px把border的宽度抵消掉。