Flex - 嵌套元素的变化顺序？ [英] Flex - changing order of nested elements?

问题描述

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

  title 
 image 
 text 
  

.title和.text被封装在一个容器中，与另一个容器屏幕大小（中等）我可以这样做：

  title | image 
 text |图像元素的延续
  

我曾经想过为小屏幕使用flex列布局，元素顺序，但顺序似乎没有影响嵌套的子元素。

这是小代码：

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; 
 
 
 
 $ b $ p 
 $ b 
我的代码是medium（从小到大） p> 
 
 
  .container {
 flex-direction：row; 
} 
 .content {
 flex-basis：50％; 
} 
 .image {
 flex-basis：50％; 
 
  
 
 
解决方案
 。标题和文字不是图像的兄弟姐妹。您需要将标题，文字和图片封装在一般的父块中。 
On small screens i'm trying to get my .image div to slot in between .title and .text divs, something like:
title
image
text
.title and .text are wrapped in a container, this is so on a different screen size (medium up) I can do:
title | image
text  | continuation of image element
I've thought about using a flex column layout for small screens, and changing the order of elements, but order doesn't seem to have an effect on a nested child element.

Here's the code for small:

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;
}
For reference my code for medium is (cascading upwards from small):
.container {
     flex-direction: row;
}
.content {
    flex-basis: 50%;
}
.image {
    flex-basis: 50%;
}

解决方案
You can ordering only sibling elements. Title and text aren't sibling with image. You need wrap title, text and image in general parent block

                        
这篇关于Flex  - 嵌套元素的变化顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！