06--垂直方向布满整个空间

display: flex;
justify-content: space-between;
flex-direction: column;

<style>
            *{
                padding: 0;
                margin: 0;
            }
          ul{
             height: 300px;
             border: 4px solid red; 
             display: flex;
             justify-content: space-between;
             flex-direction: column;
            }
            li{
                list-style: none;
            }
                
            .aa{
                background: #A0522D;
            }
            .bb{
                background: #0099FF;
            }
            
            .cc{
                background: #A0522D;
            }
            .dd{
                background: #0099FF;
            }

        </style>

<ul>
<li class="aa">11</li>
<li class="bb">22</li>
<li class="cc">33</li>
<li class="dd">44</li>
</ul>

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：晚来南风晚相识

如果文中有什么错误，欢迎指出。以免更多的人被误导。