元素的属性align-self本身不起作用

Question

我的元素放在了一些flex容器中，但我本身无法对齐。 我已经尝试过更改属性的某些值，但是没有任何效果（（（（

<div id="mainHeader">
        <img id="mainHeaderImageLeft" src="images/coder.png">

        <span id="mainHeaderCodeImg">for(int i=0; i < arr.length; i++){ <br>System.out.println("Hello World");<br>
        int width = 10;<br>
        System.err.println(width);
        <br>}</span>
</div>

#mainHeader{
    width: 100%;
    height: 10vh;
    display: flex;
    margin-top: calc(-1 * height);
    background: var(--primary-light);
    overflow: hidden;
}

#mainHeaderCodeImg{
    display: block;
    justify-self: flex-end;
    align-self: flex-end;
}