Why is flex-end and flex-start the top and bottom with flex-direction:row

Question

Im trying to put some text and some button into a row, and i want the buttons to be on the Right side and the Text to be on the left side.

Basically im creating a flexbox and then i give some items the right class and some the left.

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>

Basically i thought with flex-direction: row; the stat would be left and the end would be right, but apparently not, since it puts left on the top of the div and right on the bottom, both horizontally aligned like i didnt even do anything.

Answer 1

align-self works on the cross-axis so in a row it's a vertical alignment.

The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

It's possible you meant justify-self but this does not have any effect in a flex row.

In flexbox layouts, this property is ignored.

If you need the buttons on the right side, you can employ the margin-left:auto option.

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>