“ align-self：flex-start”和“ align-slef：基线”有什么区别

Question

       ul {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background: yellow;
            display: flex;
            flex-direction:row;
        }
        li {   
            width: 200px;      
            height: 200px;
            background: pink;
            list-style: none; 
        }
        li:nth-child(1) {
            align-self: baseline;
        }
        li:nth-child(2) {
            align-self: flex-start;
        }
        li:nth-child(4) {
            font-size: 35px;
        }

 <ul>
        <li style="background: red;">list1</li>
        <li style="background: green">list2</li>
        <li style="background: orange">list3</li>
        <li style="background: blue">list4</li>
    </ul>

   

在任何场景中，list1和list2具有相同的表现！！我尝试将基线与flex-start进行比较，但是我找不到它们的区别，我该怎么办？