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＆amp;的班级。将flex-grow留在1中以保持同一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>

编辑：对于超过350像素的响应或任何添加@media查询（确保它设置在CSS表的末尾或晚于自定义width .one {{1} }＆amp; .two）：

在external JSFiddle

上测试调整大小窗口

.three