Контейнер и элементы flexbox: дисплей: ни один элемент не занимает место

Question

Я скрыл некоторые из своих элементов с помощью свойства css: нет, но каким-то образом они все еще занимают место, когда отображаются мои видимые элементы.

JSFiddle Здесь: https://jsfiddle.net/evanF/pdLyto1k/6/

htmlfile

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

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 to #selectten занимают место, несмотря на отображение: скрыто.

Answer 1

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

}

Поскольку вы даете display: none; для img, который находится внутри тега привязки, поэтому привязка будет занимать пространство.

или

Дайте ни одного отображаемого элемента a, используя nth-child или классы или скрипт.

Затем измените порядок css, как показано ниже:

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

    display: none; 

};


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

    display: none;

};


#submitEveryoneChoiceButton, #newRoundButton {

    display: none;

};