Question

如果我有如下所示的元素，容器div的子元素将首先换行。我想首先将items 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;到此容器，其内容将首先换行，直到包装的内容占用太多宽度。

＆＃13;

<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>

＆＃13;

Answer 2

您只需将flex-wrap: nowrap设置为容器div。

＆＃13;

<div id="container" style="display:flex; flex-direction:row; flex-wrap: nowrap">
  <div id="title">titletitletitletitle * </div>
  <div id="items" style="display:flex; flex-direction: row; flex-wrap: wrap; justify-content:space-evenly;">
     <div>AAAAAAAAAAAAA * </div>
     <div>BBBB BBBBBBBBB * </div>
     <div>CCCCCCCCCCCCC * </div>
     <div>BB BBBBBBBBBBB * </div>
     <div>CCCCCCCCC CCCC * </div>
     <div>BBBBBBBBBBBBB * </div>
     <div>CCCCCCCC CCCCC * </div>
  </div>
</div>

＆＃13;

flex内部子包装顺序

2 个答案: