显示flex flex折回宽度问题

Question

我有一个父元素，它有5个子元素(它可以是任何数量，因为它是动态的，但这是当前的情况)

<div class="parent">
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
</div>

父元素应用了以下css

.parent {
    height: 48px;
    line-height: 24px;
    flex-wrap: wrap;
    flex-flow: column;
    display: flex;

}

孩子们有这些风格

.child {
    width: 116px;
    align-items: center;
}

问题是，父对象只有一个子对象的宽度( 116px )，即使它有三列，每列都有116px宽。

任何帮助都是非常感谢的。

谢谢

Answer 1

在flex-flow:列下面放置flex- wrap : wrap，这样就可以解决问题了。或者干脆删除flex-flow:列，因为它会与flex- wrap : wrap冲突。

如下所示：

​

.parent {
    height: 48px;
    line-height: 24px;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
}

.child {
    width: 116px;
    align-items: center;
  border: 1px solid;
}

<!-- flex-wrap below flex-column -->

<div class="parent">
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
</div>

​

​

.parent {
    height: 48px;
    line-height: 24px;
    display: flex;
    flex-wrap: wrap;
}

.child {
    width: 116px;
    align-items: center;
  border: 1px solid;
}

<!-- no flex-column -->

<div class="parent">
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
    <div class="child">Some text</div>
</div>

​