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（Codepen）

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中，并为行提供柔性显示，边框为可选。

除非您要为每种产品指定特定的颜色，否则无需进行其他分类。

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

Flexbox：使用2个以上的辅助对象

1 个答案: