2

我有一个允许单个子元素的 flexbox div。到目前为止，我已经能够很好地对齐孩子（上、左、右、下等），包括垂直拉伸。我还希望能够在垂直拉伸的同时支持水平拉伸（“同时”似乎是关键）。

我已经能够通过在子元素上将“flex”属性设置为“1 100%”来完成水平拉伸，但这似乎忽略了应用于父元素的任何填充（以及应用于子节点的任何边距）事情）。

查看 flexbox 规范，我无法找到任何其他方法来沿着 flexbox 的主轴执行此操作。横轴拉伸没有问题。

4

2 回答 2

2

有可能的。这是一个小样本，向您展示如何：

.centerbox {
  /* basic styling */
  width: 350px;
  height: 95px;
  font-size: 14px;
  border: 1px solid #555;
  background: #CFC;
  /* flexbox, por favor */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <style>
    .centerbox {
      /* basic styling */
      width: 350px;
      height: 95px;
      font-size: 14px;
      border: 1px solid #555;
      background: #CFC;
      /* flexbox, por favor */
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      display: -moz-box;
      -moz-box-orient: horizontal;
      -moz-box-pack: center;
      -moz-box-align: center;
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;
    }
  </style>
</head>

<body>
  <div class="centerbox">
    <textarea>resize me, please</textarea>
  </div>
</body>

</html>

仅供参考：Axel Russell 在编写多浏览器支持类方面做了一些出色的工作：http: //infrequently.org/2009/08/css-3-progress/

于 2012-04-30T18:56:55.333 回答
0

尽管您找到了解决方案，但我认为下一个片段对于所有搜索通用解决方案的开发人员（例如我自己）来说可能很方便。 http://jsfiddle.net/EL2KL/1/ 如果您发布解决方案的小提琴，我会很高兴。

ps 感谢 Jiri（flex 大师）

于 2012-07-25T08:47:12.257 回答