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>