CSS Flexbox показывает элементы в разных строках, когда они видны и невидимы - PullRequest
Новая
       9

CSS Flexbox показывает элементы в разных строках, когда они видны и невидимы

1 голос
/ 07 мая 2020

Я пытаюсь изучить Flexbox, и у меня возникла проблема с этим упражнением. Задача состоит в том, чтобы иметь div с 4 div внутри. Когда есть 2 или 3 видимых div, они должны быть разделены на равную ширину, и все они должны быть высотой основного div. Но когда все 4 элемента div внутри основного div видны, тогда они будут в двух строках, содержащих по два div в каждой.

Как я могу сделать это возможным? Я пробовал некоторые самостоятельно, но не смог заставить его работать: 

<div id="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item invisible"></div>
</div>

Это CSS, который я создал: 

#wrapper{
  width: 100%;
  height: 100%;

  display: flex;
  flex-wrap: wrap;
}

.item{
  min-width: 33%;
}

.invisible{
  display: none;
}

Изображение того, как он должен посмотрите с 2 элементами внутри оболочки Div 

<div id="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item invisible"></div>
  <div class="item invisible"></div>
</div>

3 elements in the main Div

Изображение того, как это должно выглядеть с 3 элементами внутри оболочки Div 

<div id="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item invisible"></div>
</div>

3 elements in the main Div

Изображение того, как это должно выглядеть с 4 элементами внутри оболочки Div 

<div id="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

4 elements in the main Div

1 Ответ

3 голосов
/ 07 мая 2020

Вот идея использования сетки CSS. По умолчанию у меня есть макет столбца с одной строкой от 1 до 3 элементов, и только когда есть 4 элемента, макет изменяется на две строки. Чтобы обнаружить это, все элементы должны не иметь невидимый класс 

#wrapper {
  height: 200px;
  width: 200px;
  display: inline-grid;
  vertical-align:top;
  
  grid-auto-columns:1fr;
  grid-auto-flow:column;
  border:5px solid white;
}

.invisible {
  display:none;
}

/* this will select the last item and move it to second row*/
:not(.invisible) + :not(.invisible) + :not(.invisible) + :not(.invisible) {
  grid-row:2;
}

/* this will make sure the blue remain in the first row*/
:first-child:not(.invisible) + :not(.invisible) {
  grid-column:2;
}
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item" style="background:blue;"></div>
  <div class="item" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item" style="background:blue;"></div>
  <div class="item" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item " style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item " style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item " style="background:blue;"></div>
  <div class="item" style="background:green;"></div>
  <div class="item invisible" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item" style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item " style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item " style="background:blue;"></div>
  <div class="item " style="background:green;"></div>
  <div class="item invisible" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item " style="background:green;"></div>
  <div class="item invisible" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item invisible" style="background:red;"></div>
  <div class="item " style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item invisible" style="background:yellow;"></div>
</div>
<div id="wrapper">
  <div class="item " style="background:red;"></div>
  <div class="item invisible" style="background:blue;"></div>
  <div class="item invisible" style="background:green;"></div>
  <div class="item invisible" style="background:yellow;"></div>
</div>
...