This question already has answers here:
In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
                                
                                    (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/

10-12 12:25
查看更多