我有一个允许单个子元素的 Flexbox div。到目前为止，我已经能够很好地对齐子项(顶部、左侧、右侧、底部等)，包括垂直拉伸(stretch)。我还希望能够同时支持水平拉伸(stretch)和垂直拉伸(stretch)(“同时”似乎是关键)。
我已经能够通过将子元素上的“flex”属性设置为“1 100%”来完成水平拉伸(stretch)，但这似乎忽略了应用于父元素的任何填充(以及应用于子元素的任何边距)节点)。
查看 Flexbox 规范，我找不到任何其他方法可以沿着 Flexbox 的主轴线执行此操作。跨轴拉伸(stretch)没问题。
最佳答案
这是可能的。这是一个小示例，向您展示如何操作:
.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/
关于HTML5 Flexbox 可以在两个轴上拉伸(stretch)吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10388886/