使用flex box时，如何在属性周围垂直应用空间

Question

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

display:flex；对齐内容：周围的空间；

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

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