Question

我认为我的代码井井有条，但是我不知道为什么我无法以这种方式组织元素：

|**   *|

这是我的代码：

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

Answer 1

代替align-self: flex-end（沿行弯曲方向，align-self和align-items在中对齐 flex项交叉轴（表示垂直））-您可以在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>

在这种情况下，我更喜欢使用页边距，但是您也可以使用伪元素并将项目隔开，并在其上使用flex-grow: 1。

在 flex项中添加order: 1，在 pseudo元素中添加order: 2，在{{ 1}}元素按此顺序放置弹性项目。
将order: 3添加到伪元素强制其填充剩余的所有剩余空间，从而将right元素放置右端。

但是，如果您问我，这太过分了-请参见下面的演示

flex-grow: 1

right

如何将左边的第一个2个元素和右边的最后一个元素对齐

1 个答案: