如何对齐左边的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-self和align-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个第一个元素和右边的最后一个元素[重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何对齐除一个导航栏项目以外的所有项目，从左边距开始，固定组合的最小和最大宽度，但最后一个项目发送到右边距？