This question already has answers here:
In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
(4个答案)
6个月前关闭。
我试图将一些文本和一些按钮排成一行,我希望按钮在右侧,文本在左侧。
基本上,即时通讯创建了一个flexbox,然后我给一些项目设置了正确的类,而给了一些项目。
基本上我认为与flex-direction:行;该统计将是左和末端将是正确的,但显然不是,因为它放在div的顶部,而在底部的右边,这两个水平对齐,就像我什至没有做任何事情。
(4个答案)
6个月前关闭。
我试图将一些文本和一些按钮排成一行,我希望按钮在右侧,文本在左侧。
基本上,即时通讯创建了一个flexbox,然后我给一些项目设置了正确的类,而给了一些项目。
html, body { width: 100%; }
.flexbox {
flex-direction: row;
width: 100%;
display: flex;
align-items: center;
}
.right {
align-self: flex-end;
}
.left {
align-self: flex-start;
}
<div class="flexbox" *ngFor="let a of api.active_articles">
<a class="left">{{a.nameDe}}/{{a.nameIt}}</a>
<a class="left">{{a.descriptionDe}}/{{a.descriptionIt}}</a>
<button class="right" id="edit">Edit</button>
<button class="right" id="delete">Delete</button>
</div>
基本上我认为与flex-direction:行;该统计将是左和末端将是正确的,但显然不是,因为它放在div的顶部,而在底部的右边,这两个水平对齐,就像我什至没有做任何事情。
最佳答案
align-self
在横轴上工作,因此连续是垂直对齐。
align-self CSS属性将覆盖网格或弹性项目的align-items值。在网格中,它将项目对齐到网格区域内。在Flexbox中,它使项目在横轴上对齐。
您可能的意思是justify-self
,但这在flex行中没有任何作用。
在flexbox布局中,将忽略此属性。
如果需要右侧的按钮,则可以使用margin-left:auto
选项。
html, body { width: 100%; }
.flexbox {
flex-direction: row;
width: 100%;
display: flex;
align-items: center;
}
#edit {
margin-left:auto;
}
<div class="flexbox" *ngFor="let a of api.active_articles">
<a class="left">Name</a>
<a class="left">Description</a>
<button class="right" id="edit">Edit</button>
<button class="right" id="delete">Delete</button>
</div>
关于html - 为什么使用flex-direction和end分别以flex-end和flex-start开头和行:,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57167928/