html - flexbox 容器和元素 : the display: none elements still occupying space

Question

我用 css 属性 display: none 隐藏了我的一些元素，但是当我的可见元素显示时，它们仍然以某种方式占用空间。

JSFiddle 在这里:https://jsfiddle.net/evanF/pdLyto1k/6/

html文件

<div id="displayCardsEveryone">

        <a id="selectOneAnchor" href="http://placekitten.com/200/300" data-caption="Card 1">
          <img id="selectone" src="http://placekitten.com/200/300" alt="" />
        </a>

        <a id="selectTwoAnchor" href="http://placekitten.com/200/300" data-caption="Card 2">
          <img id="selecttwo" src="http://placekitten.com/200/300" alt="" />
        </a>

        <a id="selectThreeAnchor" href="http://placekitten.com/200/300" data-caption="Card 3">
          <img id="selectthree" src="http://placekitten.com/200/300" alt="" />
        </a>


        <a id="selectFourAnchor" href="images/img1.jpg" data-caption="Card 4">
          <img id="selectfour" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectFiveAnchor" href="images/img1.jpg" data-caption="Card 5">
          <img id="selectfive" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectSixAnchor" href="images/img1.jpg" data-caption="Card 6">
          <img id="selectsix" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectSevenAnchor" href="images/img1.jpg" data-caption="Card 7">
          <img id="selectseven" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectEightAnchor" href="images/img1.jpg" data-caption="Card 8">
          <img id="selecteight" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectNineAnchor" href="images/img1.jpg" data-caption="Card 9">
          <img id="selectnine" src="images/img1.jpg" alt="" />
        </a>

        <a id="selectTenAnchor" href="images/img1.jpg" data-caption="Card 10">
          <img id="selectten" src="images/img1.jpg" alt="" />
        </a> 

CSS文件

body, html
{
    display: flex;
    height: 100vh;
    min-height: 100vh;
    flex-direction: column;
    background-image: url("website flex layout/background5.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    /*overflow: hidden;*/

    margin: 0;
    padding: 0;

}


a {
    max-height: 100%;
    max-width: 100%;
    display: flex;
    flex: 1 1 0;
}


img {

    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px; 

    max-height: 100%; 
    max-width: 75%;

    object-fit: fill;
    flex: 1 1 0; 
    min-width: 0%;
    min-height: 0%;


}


.flex-container3 {

    display: flex;
    height: auto;
    min-height: 25vh;

}


#displayCardsEveryone {

    display: flex;
    flex: 5;
    justify-content: center;
    align-items: center;
    border-top: solid 4px #00e673;

}

#selectfour, #selectfive, #selectsix, #selectseven, #selecteight, #selectnine, #selectten {

    display: none;

};

#selectFourAnchor, #selectFiveAnchor, #selectSixAnchor, 
#selectSevenAnchor, #selectEightAnchor, #selectNineAnchor, #selectTenAnchor {

    display: none; 
 
};

我希望元素的自动调整大小和定位就像只有这 3 个可见元素存在一样，但不知何故 flexbox 调整大小和居中考虑了显示:也没有。

我希望#selectone、#selectwo、#selectthree 显示并占用可用宽度。

我相信 #selectfour 到 #selectten 正在占用空间，尽管 display: none。

Answer 1

a {
max-height: 100%;
max-width: 100%;
display: flex;
//flex: 1 1 0; //remove flex: 1 1 0; for from here

因为您为位于 anchor 标记内的 img 提供了 display: none;，所以 anchor 仍然会占用空间。

或者

使用 nth-child 或类或脚本为 a 元素提供无显示。

然后改变css的顺序如下:

    #selectFourAnchor, #selectFiveAnchor, #selectSixAnchor, 
#selectSevenAnchor, #selectEightAnchor, #selectNineAnchor, #selectTenAnchor {

    display: none; 

};


#selectfour, #selectfive, #selectsix, #selectseven, #selecteight, #selectnine, #selectten {

    display: none;

};


#submitEveryoneChoiceButton, #newRoundButton {

    display: none;

};