html - 显示 flex flex wrap 宽度问题

Question

<分区>

Answer 1

将 flex-wrap: wrap 放在 flex-flow:column 下面，这将解决问题。或者只是简单地删除 flex-flow:column，因为它会与 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>