Flex-start和flex-end在一行中

Question

如何在具有flex-start属性的一行中定位几个元素，而在具有flex-end属性的一行中定位几个元素。

Answer 1

类似，使用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 2

使用分隔符拆分：

.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）可能不支持此功能。

Answer 3

最简单的方法是使用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。