Css 如何使flexbox中的div显示在下一行？

我希望flexbox容器中的div出现在下一行中

我有一个抽屉div，其中有details div。在details div中，我希望SVG和span元素在一行中。如果span元素的文本不止一行，则应放入下一行，span元素后的div元素应始终位于span元素下方，并在列表元素中居中，无论span元素的文本是一行还是多行

像下面这样。

下面是代码

.drawer {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 392px;
    top: 55px;
    right: 8px;
    min-height: 40%;
    max-height: 450px;
    margin-left: 16px;

    &::after {
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 83%;
        margin-left: -5px;
        border-width: 14px;
        border-style: solid;
    }
}

.item {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    padding: 8px;
    min-height: 49px;
    li {
        list-style: none;
    }
    .details {
        display: flex;
        flex-grow: 1;
        color: #333;
        margin-right: 4px;
     }
 }
<div class="drawer">
    <ul>
        <li class="item">
            <div class="details">
                <svg/>
                <span>sometext</span>
                <div>
                    <div/><img/>
                </div>
             </div>
        </li>
    </ul>
</div>

---

有人能帮我解决这个问题吗？谢谢。

您的结构包含了太多的样式，我在查看了附件png的要求后不确定。 我已经添加了一个简单的结构，适合您的要求，请看看它是否有意义。 如果你想要什么，请回复

.抽屉{ 显示器：flex； 弯曲方向：立柱； 位置：绝对位置； 宽度：392px； 顶部：55px； 左：8px； 最小高度：40%； 最大高度：450像素； 左边距：16像素； } svg{ 边框：实心1px； } .抽屉{ 内容：； 位置：绝对位置； 底部：100%； 左：83%； 左边距：-5px； 边框宽度：14px； 边框样式：实心； } .项目{ 显示器：flex； 弯曲方向：行； 字体大小：12px； 填充：8px； 最小高度：49px； } .项目{ 列表样式：无； 边框底部：实心1px； } .项目.详情{ 颜色：333； 保证金权利：4px； } .媒体{ 显示器：flex； 调整项目：灵活启动； } .媒体机构{ 弹性：1； } 占位符64x64 克拉斯坐在阿梅特·尼布·利伯罗的怀里。这是一个很好的解决方案。奥迪奥火山口，秃鹫口前庭，特普斯维韦拉火山口。Fusce调味品nunc ac nisi vulputate fringilla。多奈克猫 在福西布斯

居中对齐文本

占位符64x64 克拉斯坐在阿梅特·尼布·利伯罗的怀里。这是一个很好的解决方案。奥迪奥火山口，秃鹫口前庭，特普斯维韦拉火山口。Fusce调味品nunc ac nisi vulputate fringilla。多奈克猫 在福西布斯

居中对齐文本

占位符64x64 克拉斯坐在阿梅特·尼布·利伯罗的怀里。这是一个很好的解决方案。奥迪奥火山口，秃鹫口前庭，特普斯维韦拉火山口。Fusce调味品nunc ac nisi vulputate fringilla。多奈克猫 在福西布斯

居中对齐文本

---

下面的文本将居中，更多内容将放在顶部

.抽屉{ 显示器：flex； 弯曲方向：行； } .抽屉图标{ 宽度：60px； 高度：60px； 背景：紫罗兰属； 右边距：16px； } p{ 文本对齐：居中； } 一些文本 居中文本

---

你可以给flex-wrap:wrap；对于父容器和flex basis：100%到您希望在新行中显示的div谢谢，但这也会将多行的span元素放到下一行，这意味着它将svg放到下一行的第一行，然后会显示span元素。添加适当的HTML代码，如svg和。如果这已经解决了您的问题，请接受答案，以便其他人也能从中受益，并节省时间和精力。谢谢