代码之家 › 专栏 › 技术社区 › ADH - THE TECHIE GUY

使用Flex Box时如何垂直应用属性周围的空间?

space flexbox css html

ADH - THE TECHIE GUY · 技术社区 · 6 年前

你好,伙计们,我想在一列中用相等的空格垂直排列列表项的个数。 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属性得到一个答案

1 回复 | 直到 6 年前

Sam Willis blabla test 6 年前

您需要将您的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>