我有一个 flex 容器，它有两个 child (一个标题和一个 flexbox )。这个容器的方向是列。盒子的子方向是行，我想使用 flex-basis 来限制它的宽度。
这是一个codepen为此。
.container {
display: flex;
flex-direction: column;
}
.box {
display: flex;
flex-direction: row;
border: 1px solid #d3d3d3;
padding: 12px;
justify-content: space-between;
flex-basis: 192px;
}
问题是 flex-basis 正在改变容器的高度，而不是宽度。如何解决这个问题？
最佳答案
flex-basis 属性是在 flex 元素上设置的，而不是 flex 容器，在您的情况下，flex 容器 container 具有列方向，因此 flex -basis 影响高度。
请注意，您在 box 规则中的 flex-basis 不会响应 box 上设置的 flex 方向，它响应其 flex 容器方向，container
使用额外的包装器，设置为行方向，使用 flex-basis 定义宽度是可能的:https://codepen.io/alansouzati/pen/VWWNdX
关于css - 如果父级有列方向，则 Flexbox 基础不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44707257/