如果父级具有列方向，则Flexbox基础不起作用

Question

我有一个有两个孩子的灵活容器（一个标题和一个弹性框）。该容器的方向是列。盒子方向是行，我想使用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正在改变容器的高度，而不是宽度。如何解决这个问题？

Answer 1

flex-basis属性在flex项目上设置，而不是在flex容器中设置，在您的情况下，Flex容器container具有列方向，因此flex-basis会影响高度。

注意，flex-basis规则中的box不响应box上设置的弹性方向，它响应其弹性容器方向container 1}}

使用额外的包装器，可以设置为行方向，使用flex-basis定义宽度：https://codepen.io/alansouzati/pen/VWWNdX