使用 flex box 时如何在属性周围垂直应用 space？

Question

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

display: flex; align-content: space-around;

但没有达到预期 result.Please 帮我解决这个问题。我在下面添加了我的代码片段

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

Please Note :- I would like to have an answer Using flex-box property

Answer 1

您需要将弹性属性放在 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>

使用 flex box 时如何在属性周围垂直应用 space？

how to apply space around property vertically when using flex box?

html

css

flexbox

space

使用 flex box 时如何在 属性 周围垂直应用 space？

how to apply space around property vertically when using flex box?

html

css

flexbox

space

使用 flex box 时如何在属性周围垂直应用 space？