使用弹性框时如何在属性周围垂直应用空间？

Question

大家好，我想使用css flex-box属性在列中以相等的间距垂直排列列表项。 我尝试使用

  

显示：flex;       align-content：环绕;

但是没有给出预期的结果。请帮助我解决此问题。我在下面添加了我的代码段

#vote-poll{
    display: flex;
    /*flex-direction: column;
    /*justify-content: space-around;*/
    align-content: space-around;
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}
#vote-poll ul>li{
    border:1px solid #000;
    /*width:100%;
    box-sizing:border-box;
    height:20%;*/
    
}
li{
list-style:none;

/*padding:0px;
margin:0px;*/
}
ul {
list-style:none;
padding:0px;
margin:0px;
}

<section id="vote-poll" class="border-box">
                            <ul>
                                <li>
                                    <div class="party-name-text">
                                        CONG
                                    </div>
                                    <div></div>
                                    <div></div>
                                </li>
                                <li>
                                    <div class="party-name-text">
                                        BJP
                                    </div>
                                    <div></div>
                                    <div></div>
                                </li>
                                <li>
                                    <div class="party-name-text">
                                        IROM
                                    </div>
                                    <div></div>
                                    <div></div>
                                </li>
                           </ul>
</section>

  

请注意：-我想使用弹性框属性来解决这个问题

Answer 1

您需要将flex属性放在ul上，因为它是要影响的项目的父项。试试这个；

#vote-poll{
    display: flex;
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}
#vote-poll ul>li{
    border:1px solid #000; 
}
li {
    list-style:none;
}
ul {
    list-style: none;
    padding: 0px;
    margin: 0px;

    /* NEW PROPERTIES HERE */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

<section id="vote-poll" class="border-box">
    <ul>
         <li>
              <div class="party-name-text">
                 CONG
              </div>
              <div></div>
              <div></div>
         </li>
         <li>
              <div class="party-name-text">
                 CONG
              </div>
              <div></div>
              <div></div>
         </li>
         <li>
              <div class="party-name-text">
                 CONG
              </div>
              <div></div>
              <div></div>
         </li>
    </ul>
</section>