css - Flexbox:使用两个以上的旁白

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; 
}

my code (代码笔)

Answer 1

你可以做 this

.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 中，并让行灵活显示，边框可选。

除非你想为每个产品指定特定的颜色，否则不需要做不同的旁白类。

理想情况下，您会将这些产品构建到一些数组中，这些数组将动态导入等，但我不知道您的用例。