Flex - 改变嵌套元素的顺序？答案

【问题标题】：Flex - changing order of nested elements?Flex - 改变嵌套元素的顺序？
【发布时间】：2017-08-03 22:05:54
【问题描述】：

在小屏幕上，我试图让我的 .image div 插入 .title 和 .text div 之间，类似于：

title
image
text

.title 和 .text 被包装在一个容器中，这是在不同的屏幕尺寸（中等以上）上我可以做到的：

title | image
text  | continuation of image element

我考虑过在小屏幕上使用弹性列布局，并更改元素的顺序，但顺序似乎对嵌套的子元素没有影响。

这是小号的代码：

HTML：

<div class="container">
    <div class="content">
        <div class="title"></div>
        <div class="text"></div>
    </div>
    <div class="image"></div>
</div>

CSS：

.container {
     display: flex;
     flex-direction: column;
}
.image {
    order: 2;
}
.title {
    order: 1;
}
.text {
    order: 3;
}

作为参考，我的中等代码是（从小向上级联）：

.container {
     flex-direction: row;
}
.content {
    flex-basis: 50%;
}
.image {
    flex-basis: 50%;
}

【问题讨论】：

这样你无法达到你的要求。它不起作用，因为图像本身在您的内容 div 之外。所以它不会锻炼。

标签： html css flexbox

【解决方案1】：

您只能对兄弟元素进行排序。标题和文本与图像不是同级的。您需要在一般父块中包装标题、文本和图像

【讨论】：

好的，我怎样才能实现标题和文本堆叠的中等布局以及它们右侧的图像？
你需要在容器中添加图片元素
是的 - 但是你如何制作中等布局？
给标题 50% 的 body，给图片 50% 的 body（使用 flex-basis）并添加到容器 flex-wrap: wrap
谢谢，但这样做会在标题下方留下巨大的空白。