一条线的Flex-Start和Flex-End

Question

如何在flex-start属性的一行中找到几个元素，而在一行中找到几个元素flex-end。

Answer 1

实现这一目标的最简单方法是使用justify-content: space-between;：

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

.parent > div {
    padding: 10px;
    background: grey;
}

<div class="parent">
    <div>1</div>
    <div>2</div>
</div>

第一个 div 将显示为 flex-start，第二个 div 将显示为 flex-end。

Answer 2

这样，使用 margin-left: auto

body > div {
  display: flex;
  border: 1px solid red;
}
div div {
  padding: 10px;
  background: lightgray;
}
div div:nth-child(3) {
  margin-left: auto;
}

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

像这样使用 align-self

body > div {
  display: flex;
  border: 1px solid red;
  align-items: flex-start;
  height: 100px;
}
div div {
  padding: 10px;
  background: lightgray;
}
div div:nth-child(3),
div div:nth-child(4) {
  align-self: flex-end;
}

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Answer 3

使用分隔符元素进行拆分：

.container {
    display: flex;
    flex-direction: row;
}
.item {
    display: flex;
    flex-shrink: 0;
}
.divider {
    display: flex;
    flex: 1;
}

<div class=container>
    <div class=item>
        <div>Left One</div>
    </div>
    <div class=divider></div>
    <div class=item>
        <div>Right One</div>
    </div>
</div>

请避免使用margin: auto弯曲盒子。某些本机解决方案（例如）可能不支持此功能react native。