CSS Flexbox：如何更改元素的宽度

Question

我在 CSS 中使用 Flexbox。在下一个链接中，您可以看到三个方格相互重叠：http://codepen.io/CrazySynthax/pen/PbLjMO 第一个方格最小，最后一个方格最大。我的问题是如何绘制这些高度相同但宽度不同的正方形，因此它们将如下所示：

---
------
---------

这是代码：

<div class="container">
  <div class="square"> </div>
  <div class="square"> </div>
  <div class="square"> </div>
</div>


html, body { 
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  displax: flex;
}
.container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow:column wrap;
  justify-content:space-around;

}
.square {
  flex:1 1 auto;
  background-color:gray;
  border:solid;
  margin: 1em;
}

.square:nth-child(1) { 
  flex-grow: 1
}

.square:nth-child(2) { 
  flex-grow: 2
}

.square:nth-child(3) { 
  flex-grow: 5
}

Answer 1

向每个div具有所需的类添加一个类，width并保留flex-grows1以保持相同height：

html, body { 
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  displax: flex;
}
.container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow:column wrap;
  justify-content:space-around;
  
}
.square {
  flex:1 1 auto;
  background-color:gray;
  border:solid;
  margin: 1em;
  width: 200px
}
.square:nth-child(1) { 
  flex-grow: 1;
}
.square:nth-child(2) { 
  flex-grow: 1;
}
.square:nth-child(3) { 
  flex-grow: 1;
}
/*added classes*/
.one {
  width: 150px;
}
.two {
  width: 250px;
}
.three {
  width: 350px;
}

@media (max-width: 350px) {
   .one {
      width: auto;
   }
   .two {
      width: auto;
   }
   .three {
      width: auto;
   }
}

<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
</div>

编辑：对于超过 350px 的响应或添加@media查询（确保它设置在 CSS 表的末尾或晚于自定义width .one .two& .three）：

在外部 JSFiddle上测试调整窗口大小

@media (max-width: 350px) {
   .one {
      width: auto;
   }
   .two {
      width: auto;
   }
   .three {
      width: auto;
   }
}