CSS Стиль Flexbox меняется в зависимости от количества элементов - PullRequest
Новая
       12

CSS Стиль Flexbox меняется в зависимости от количества элементов

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

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

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

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

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

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

  display: flex;
  flex-wrap: wrap;
}

.item{
  min-width: 33%;
}

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

3 elements in the main Div

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

3 elements in the main Div

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

4 elements in the main Div

Ответы [ 2 ]

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

Рассмотрим nth-child, чтобы управлять этим: 

#wrapper {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  border:5px solid white;
  box-sizing:border-box;
}


.item {
  flex-grow:1;
}

/* apply when there is 4 items */
#wrapper > :first-child:nth-last-child(4),
#wrapper > :first-child:nth-last-child(4) ~ *{
  flex-basis:50%;
}

body {
  margin:auto;
}
<div id="wrapper">
  <div class="item" style="background:red;"></div>
  <div class="item" style="background:blue;"></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>
<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>
2 голосов
/ 07 мая 2020

Попробуйте изменить следующее на CSS

.item{
  min-width: 33%;
  flex-grow: 1;
}

.item:first-child:nth-last-child(4),
.item:first-child:nth-last-child(4) ~ .item {
    min-width: 50%;
}

Это работает только для CSS3. Вы можете себе представить масштабирование для большего количества элементов с дополнительными записями

...