如何对齐左边的2个第一个元素和右边的最后一个元素[重复]

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何对齐左边的2个第一个元素和右边的最后一个元素[重复]相关的知识,希望对你有一定的参考价值。

我认为我的代码是有序的,但我不知道为什么我无法以这种方式组织我的元素:

|**   *|

这是我的代码:

.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/

答案

而不是align-self: flex-end(在行弯曲方向,align-selfalign-items对齐横向轴上的弹性项目,这意味着垂直) - 你可以在margin-left: auto元素上使用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;
}

.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>

以上是关于如何对齐左边的2个第一个元素和右边的最后一个元素[重复]的主要内容,如果未能解决你的问题,请参考以下文章

Flex 如何让最后一项右边对齐?(CSS)

如何对齐除一个导航栏项目以外的所有项目,从左边距开始,固定组合的最小和最大宽度,但最后一个项目发送到右边距?

最短编辑距离问题理解

Android XML - 如何让项目在最左边、中间和最右边对齐

排序算法之冒泡排序

如何对齐左侧的第一个元素和右侧的最后一个元素[重复]