Как динамически позиционировать и изменять размер элементов div?

Question

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

РЕДАКТИРОВАТЬ: Если вы посмотрите мой пример стекаблица, я использую display: flex (то есть flexbox). У меня возникла проблема: как я могу убедиться, что строка будет иметь максимум 3 деления, а затем перенести ее на следующую строку, а длина деления всегда будет одинаковой?

.

РЕДАКТИРОВАТЬ 2: Моя цель состоит в том, чтобы, когда есть один или два div, длина div была вдвое меньше контейнера. Вот почему я поставил «линейку» вверху на изображении ниже. Если есть больше чем 2 div, длина div должна быть 1/3 длины контейнера. И строка должна быть заполнена тремя делителями перед переносом в следующую строку.

Ниже приведено визуальное представление того, чего я пытаюсь достичь:

Все div в конкретном наборе имеют одинаковую ширину и высоту.

Я вижу, как можно взломать, используя calc() в ширину, но тогда мне придется передать переменную number of divs в мой файл css. Также я знаю, что использование Несколько условий в ngClass - Angular 4 является опцией, но я хотел бы использовать это, если у меня не было никакой другой опции.

Как я могу достичь того, чего я пытаюсь достичь только с css (если возможно)? Если невозможно использовать только css, я с удовольствием приму любую другую рекомендацию.

Answer 1

Первый контейнер flex с

.container1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

Второй используйте calc() для задания ширины элементов

.item {
  width: calc(33.33% - 0px);
}

Третий определяет поведение первого и второго дочерних элементов. Они должны расти, но max-width: 50%

.item:first-child, .item:nth-child(2) {
  flex-grow: 1;
  max-width: 50%;
}

.container1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  outline: dashed red 1px;
  margin: 10px 0
}

.item {
  height: 100px;
  background-color: green;
  outline: 1px dashed blue;
  width: calc(33.33% - 0px);
}

.item:first-child, .item:nth-child(2) {
  flex-grow: 1;
  max-width: 50%;
}

<div class="container1">
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

Оформить заказ рабочей копии Убедитесь, что flex решит вышеуказанные проблемы, я думаю.

.parent {
  display:flex; 
  justify-content:space-around; 
  flex-wrap:wrap;
}

.option-box{
  width:40%;
  border: 1px blue solid;
  margin: 3px
}
@media screen and (max-width: 600px) and (min-width: 301px) {
  .option-box {
    width:30%;
  }
}
@media screen and (max-width: 300px) {
  .option-box {
    width:100%;
  }
}