Question

我有一个允许SINGLE子元素的flexbox div。到目前为止，我已经能够很好地协调孩子的工作（上，左，右，下等），包括垂直拉伸。我也希望能够在垂直的同时支持水平拉伸（'同时'似乎是关键）。

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

查看flexbox规范，我无法沿着flexbox的主轴找到任何其他方法。横轴伸展没问题。

Answer 1

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

.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/

Answer 2

虽然您找到了解决方案，但我认为下一个代码段对于搜索一般解决方案的所有开发人员（例如我自己）都很方便。 http://jsfiddle.net/EL2KL/1/ 如果您发布解决方案，我会很高兴。

P.S。感谢Jiri（弹性大师）

HTML5 Flexbox可以在两个轴上伸展吗？

2 个答案: