使用<span>将PrimeFlex项放置在右侧

Question

我有以下的js代码的角结构。这是在使用PrimeFlex，我只想把<span>test</span>放在右边。

码

<ng-template pTemplate="caption">
    <div class="p-d-flex">
        <a>
            <button>
            </button>
        </a>
        <a>
            <button></button>
        </a>
        <span>test</span>
        <span class="p-input-icon-left p-ml-auto">
            <i class="pi pi-search"></i>
            <input/>
        </span>
    </div>
</ng-template>

预期结果

​

我对PrimeFlex是个新手..。官方PrimeFlex文档中的哪个类值应该放在<span>中？https://www.primefaces.org/primeflex/migration

有什么建议吗？

Answer 1

将and flex div的内容分成两部分，并在其中使用p

<div class="p-d-flex p-jc-between">
  <div>
    <a>
      <button></button>
    </a>
    <a>
      <button></button>
    </a>
  </div>
  <div>
    <span class="p-as-end">test</span>
    <span class="p-input-icon-left p-ml-auto">
      <i class="pi pi-search"></i>
      <input />
    </span>
  </div>
</div>