Flex - 嵌套元素的更改順序？

在小屏幕上我試圖讓我的.image的div .title和.text的div之間的插槽，這樣的：Flex - 嵌套元素的更改順序？

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%; 
}

來源

2017-08-02 panthro

您無法像這樣達到您的要求。它不起作用，因爲圖像本身不在您的內容div內。所以它不會鍛鍊。 – Abinthaha

-1

您只能訂購同級元素。標題和文字不是與圖像兄弟姐妹。您需要將標題，文字和圖片封裝在一般父母區塊

來源

2017-08-02 10:20:59

好的，那麼我怎麼才能實現我的中間佈局的標題和文字堆疊和圖像的右側？ – panthro

您需要將圖像元素添加到容器中 –

是的 - 但是如何在中間佈局中做到這一點？ – panthro

Flex - 嵌套元素的更改順序？

回答

相關問題