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

Question

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

显示：弯曲；对齐内容：空格；

但它没有给出预期的结果。请帮我解决这个问题。我在下面添加了我的片段

#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>

请注意：- 我想使用 flex-box 属性得到答案

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>