为什么 flex-end 和 flex-start 使用 flex-direction:row 在顶部和底部 [重复]

【问题标题】：Why is flex-end and flex-start the top and bottom with flex-direction:row [duplicate]为什么 flex-end 和 flex-start 使用 flex-direction:row 在顶部和底部 [重复]
【发布时间】：2019-12-01 17:20:41
【问题描述】：

我试图将一些文本和一些按钮放在一行中，我希望按钮位于右侧，而文本位于左侧。

基本上我创建了一个 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: row; stat 将在左侧，而 end 将在右侧，但显然不是，因为它将左侧放在 div 的顶部，右侧放在底部，两者都水平对齐，就像我什至没有做任何事情一样。

【问题讨论】：

标签： html css flexbox alignment

【解决方案1】：

align-self 在交叉轴上工作，所以它是连续的垂直对齐。

align-self CSS 属性会覆盖网格或弹性项目的 align-items 值。在 Grid 中，它对齐网格区域内的项目。在 Flexbox 中，它在交叉轴上对齐项目。

您的意思可能是justify-self，但这对弹性行没有任何影响。

在 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>

【讨论】：