如何使用flex布局 同一行的所有元素往左对齐,最后一个元素设置单独布局往右对齐?

514 阅读1分钟

父容器设置为 Flex 容器。然后,你可以使用 justify-content: flex-start 将所有元素向左对齐,并在最后一个元素使用 margin-left: auto 将最后一个元素向右对齐。

<div
    style={{
      display: 'flex',
      justifyContent: 'flex-start',
    }}
>
<div>元素1</div>
<div>元素2</div>
<div
  style={{
    marginLeft: 'auto',
  }}
>
  <div>最后一个元素</div>
</div>
</div>