如果想在flex布局中结合x-fill和x-if展示一批可筛选数据，如何写才能正确的避免gap的影响？还是说此时不能使用gap？

[cyb233]

以下尝试中：

1. 没用flex，不会产生gap的间距，空div无影响
2. 使用flex和gap，空div之间也有gap定义的间距。导致间距不一致
3. 不使用div包裹x-if，报错ReferenceError: $data is not defined
4. 放弃gap属性，在x-if内部使用margin

这种情况只能放弃gap吗？

<template page>
  <h1>0</h1>
  <div style="margin: 10px;">
    <x-fill :value="list">
      <span style="border: 1px solid;">{{$data}}</span>
    </x-fill>
  </div>
  <h1>1</h1>
  <div style="margin: 10px;">
    <x-fill :value="list" name="Items"></x-fill>
  </div>
  <template name="Items">
    <div style="display: inline;">
      <x-if :value="$host.indexs.includes($index)">
        <span style="border: 1px solid;">{{$data}}</span>
      </x-if>
    </div>
  </template>
  <h1>2</h1>
  <div style="display: flex;gap: 10px;margin: 10px;">
    <x-fill :value="list" name="Items1"></x-fill>
  </div>
  <template name="Items1">
    <div style="display: inline;">
      <x-if :value="$host.indexs.includes($index)">
        <span style="border: 1px solid;">{{$data}}</span>
      </x-if>
    </div>
  </template>
  <h1>3</h1>
  <div style="display: flex;gap: 10px;margin: 10px;">
    <x-fill :value="list" name="Items2"></x-fill>
  </div>
  <template name="Items2">
    <x-if :value="$host.indexs.includes($index)">
      <span style="border: 1px solid;">{{$data}}</span>
    </x-if>
  </template>
  <h1>4</h1>
  <div style="display: flex;margin: 10px;">
    <x-fill :value="list" name="Items3"></x-fill>
  </div>
  <template name="Items3">
    <div style="display: inline;">
      <x-if :value="$host.indexs.includes($index)">
        <span style="margin: 10px;border: 1px solid;">{{$data}}</span>
      </x-if>
    </div>
  </template>
  <script>
    export default ({ query }) => {
      return {
        data: {
          indexs: [1, 2, 3, 5, 8, 13, 21, 34, 55],
          list: [],
        },
        ready() {
          for (let i = 0; i < 60; i++) {
            this.list.push(`Item ${i}`);
          }
        },
      };
    };
  </script>
</template>

[kirakiray]

可以用div嵌套，搭配 display:contents 使用试试：

 <template name="Items2">
    <div style="display: contents">
      <x-if :value="$host.indexs.includes($index)">
        <span style="border: 1px solid">{{$data}}</span>
      </x-if>
    </div>
  </template>