时间戳

首页 > 解决方案 > 如何对齐左侧的 2 个第一个元素和右侧的最后一个元素

html - 如何对齐左侧的 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/

标签： htmlcssflexboxcentering

解决方案

而不是align-self: flex-end（在行 flex-direction中，align-self并在交叉轴上align-items对齐弹性项目，这意味着垂直） - 您可以在元素上使用 - 请参见下面的演示：margin-left: autoright

.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在其上使用。

  • 添加order: 1到弹性项目、伪元素和元素order: 2中，弹性项目按该顺序放置。order: 3right

  • 添加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>

推荐阅读