在 css flex 布局中为什么没有 justify-items justify-self

使用 flex 布局想要完成类似下面的

效果：

image-20190307143138686

第一反应的代码是：

1
2
3
4
5
6
7
8
9
header{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.nav-right{
    justify-self: flex-end;
}

写完之后发现并没有 justify-self 这个属性，如果有 justify-self 的话写起来就容易多了，为什么 css 规范中没有这个属性呢？

因为可以用其他方法替代，使用 margin auto。

修改后的代码：

1
2
3
4
5
6
7
8
9
header{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.nav-right{
    margin-left: auto;
}