css - flex 内部子包装顺序

Question

如果我有如下元素，容器div的子元素会先换行。我希望元素 div 的子元素首先换行。是否可以控制包裹的顺序？

<div id="container" style="display: flex; flex-wrap: wrap">
  <div id="title">titletitletitletitle</div>
  <div id="items" style="display: flex; flex-wrap: wrap">
    <div>AAAAAAAAAAAAA</div>
    <div>BBBBBBBBBBBBB</div>
    <div>CCCCCCCCCCCCC</div>
  </div>
</div>

Answer 1

如果我没理解错的话，您希望子容器的内容先包装。

设置:flex:1; 这个容器，它的内容会先换行，直到换行的内容占用太多宽度。

<div id="container" style="display:flex; flex-direction:row;flex-wrap: wrap">
  <div id="title">titletitletitletitle</div>
  <div id="items" style="display:flex; flex-direction:row;flex-wrap: wrap; flex:1;">
     <div>AAAAAAAAAAAAAAAAAAAAAAAAAA</div>
     <div>BBBBBBBBBBBBBBBBBBBBBBBBBB</div>
     <div>CCCCCCCCCCCCCCCCCCCCCCCC</div>
  </div>
</div>