гибкий внутренний порядок упаковки детей

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-wrap: nowrap для контейнера div.

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

Answer 2

Если я правильно понял, вы ожидаете, что содержимое субконтейнера будет перенесено первым.

Установка: 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>