如何在Flexbox中对齐两端的项目

Question

我有一个tdwith Two div，我想要的是将它们div在两端对齐。

<td class="lefts">
  <div>
    <h4>VOUCHER </h4>
    <h4>DATE TIME </h4>
    <h4>SALESMAN</h4>
   <h4>CUSTOMER : </h4>
    <h4>CONTACT </h4>
    <h4>VAT / : </h4>
    <h4>ADDRESS </h4>
  </div>
  <div>
    <p> HELLO WORLD </P>
  </div>
</td>

这是我希望如何对齐我的视觉表示div

Answer 1

您可以使用flexhavingjustify-content作为space-between值。

例如（我稍微改变了你的标记）：

.parent {
  display: flex;
  justify-content: space-between;
}

<div class="parent">
  <div>
    <h4>VOUCHER</h4>
    <h4>DATE TIME</h4>
    <h4>SALESMAN</h4>
    <h4>CUSTOMER:</h4>
    <h4>CONTACT</h4>
    <h4>VAT:</h4>
    <h4>ADDRESS</h4>
  </div>

  <div>
    <p>HELLO WORLD</p>
  </div>
</div>