Flexbox: использование более 2 сторон

Question

пока что это нормально для ОДНОГО продукта, но что если я хотел бы добавить БОЛЕЕ продукты?Ниже существующих?Конечно, я мог бы также поместить их в CSS, но в некоторых случаях неясно, КАК много продуктов отображаются.Разумеется, нет смысла помещать десятки дополнительных объявлений в CSS ..

HTML:

<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque ...</p>  
</article>
<aside class="aside aside-1">Product #1 photo</aside>
<aside class="aside aside-2">Product #1 details</aside>
<!--<aside class="aside aside-3">Product #2 photo</aside>-->
<!--<aside class="aside aside-4">Product #2 details</aside>-->
<footer class="footer">Footer</footer>
</div>

CSS:

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;height:300px;
}

.aside-2 {
  background: hotpink;height:300px;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; }
}


body {
  padding: 2em; 
}

мой код (Codepen)

Answer 1

Вы могли бы сделать это

.row {
  display: flex;
  flex-flow: row nowrap;
  padding: 0px;
  border: 2px solid black;
}

<div class="row">
  <aside class="aside aside-1">Product photo</aside>
  <aside class="aside aside-2">Product details</aside>
</div>
<div class="row">
  <aside class="aside aside-1">Product #2 photo</aside>
  <aside class="aside aside-2">Product #2 details</aside>
</div>

Поместите каждый набор в элементы div с классом строк и задайте гибкие дисплеи строк с необязательной границей.

Нет необходимости делать разные второстепенные классы, если вы не хотите, чтобы определенные цвета для каждого продукта.

В идеале вы должны встроить эти продукты в некоторый массив, который будет динамически импортироваться и т. Д., Но я не знаю ваш вариант использования.