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