CSS flex 盒 : how to change the width of the element

Question

我在 CSS 中使用 Flexbox。在下一个链接中，您可以看到三个方 block 一个叠一个: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 的类，并在 1 中保留 flex-grow 以维护相同的高度:

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 .two & .three):

在 external JSFiddle 上测试调整窗口大小

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