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
}

- CrazySynthax

---

为什么不使用像素？ - user5306470

矩形，不是正方形。 - j08691

flex-grow 沿着主轴（flex 的方向）工作，因此宽度受 flex-direction: row 的影响，高度受 flex-direction: column 的影响。 - Paul S

Answer 1

在具有所需宽度的每个

中添加一个类，并将flex-grow保留为1，以保持相同的高度。

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之后设置）：

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

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

- Syden

---

我的问题是这个解决方案不够响应式。屏幕宽度小于350像素时，无法最小化屏幕。 - CrazySynthax