如何使前两个元素左对齐，最后一个元素右对齐？

Question

如何使前两个元素左对齐，最后一个元素右对齐？

10

我认为我的代码没有问题，但我不知道为什么我无法按照这种方式组织我的元素：

|**   *|

这是我的代码：

.container {
  border: 1px solid red;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 200px;
  flex-direction: row;
}

.container div {
  border: 1px solid blue;
  height: 100px;
  width: 100px;
}

.right {
  display: flex;
  align-self: flex-end;
}

<div class="container">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div class="right">
    3
  </div>
</div>

我做错了什么？这是我的实时代码：https://jsfiddle.net/uxpkh9nL/

- yavg

我没有在意。 - Kamalesh M. Talaviya

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kukkuz · Accepted Answer

在 行 flex-direction 中，align-self 和 align-items 会将 flex items 在 交叉轴 上对齐，这意味着垂直方向上对齐。因此，你可以使用 margin-left: auto 在 right 元素上来替代 align-self: flex-end。请参见下面的演示:

.container{
  border:1px solid red;
  display:flex;
  justify-content:flex-start;
  width:100%;
  height: 200px;
  flex-direction:row;
}
.container div{
  border:1px solid blue;
  height: 100px;
  width: 100px;
}

.right{
  display:flex;
  /*align-self:flex-end;*/
  margin-left: auto; /* added */
}

<div class="container">
  <div>
    1
  </div>
  <div>
    2
  </div>  
  <div class="right">
    3
  </div>  
</div>

在这种情况下，我更喜欢使用边距，但您也可以使用伪元素来调整项目间的间距，并在其上使用flex-grow: 1。

将flex项目添加order: 1，将伪元素添加order: 2，将right元素添加order: 3，可以将flex项目按照该顺序排列。
将伪元素添加flex-grow: 1会强制它填充所有剩余空间，从而将right元素放置在右侧末端。

但是如果您问我，这有点过度 - 请参见下面的演示：

.container{
  border:1px solid red;
  display:flex;
  justify-content:flex-start;
  width:100%;
  height: 200px;
  flex-direction:row;
}
.container div{
  border:1px solid blue;
  height: 100px;
  width: 100px;
  order: 1; /* added */
}

.right{
  display:flex;
  /*align-self:flex-end;*/
  order: 3 !important; /* added */
}

.container:after { /* added */
  order: 2;
  content: '';
  display: block;
  flex-grow: 1;
}

<div class="container">
  <div>
    1
  </div>
  <div>
    2
  </div>  
  <div class="right">
    3
  </div>  
</div>