本文介绍了Flex - 嵌套元素的变化顺序?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在小屏幕上,我试图让我的 .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 - 嵌套元素的变化顺序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-29 20:36