时间戳

首页 > 解决方案 > flex 内子包装顺序

css - flex 内子包装顺序

问题描述

如果我有如下元素，容器 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>

标签： cssflexbox

解决方案

您可以设置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>

推荐阅读