如何使内联flex不影响其中一个孩子

Question

我在这里有一个HTML。

<style> 
    .parent { 
     display: inline-flex; 
    } 
</style> 

<div class="parent"> 
    <div class="child1"></div> 
    <div class="child2"></div> 
    <div class="image"><div> 
</div> 

在这里，我想child1和image div的进来一条线，所以我把它与物业内嵌柔性父DIV中。但同时我不希望child1和child2 divs来在同一行。任何可用的解决方案？

Answer 1

一种方法是在flex容器上启用wrap。

然后让div.child2显示为最后一个弹性项目（order: 1），并强制它通过设置足够大的宽度进行包裹。

您可以根据需要调整宽度。

.parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child1, .image { 
 
    flex: 0 0 50%; 
 
} 
 

 
.child2 { 
 
    flex: 0 0 100%; 
 
    order: 1; 
 
} 
 

 
* { box-sizing: border-box; }

<div class="parent"> 
 
    <div class="child1"></div> 
 
    <div class="child2"></div> 
 
    <div class="image"></div> 
 
</div>

Answer 2

把你的孩子元素行

.row { height:100px; overflow hidden;} // assuiming 100px is height of a child 
.row > .children { height:100px; float:left;} 

或假设所有div的大小都一样大汤可以包围每对DIV的[1] [2] [3] [4]并将它们浮动到任何你想要的位置。

Answer 3

使用Flex中，我可以看到这样做的最有效的方法是这样的：

.parent { 
 
    display: inline-flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child1, 
 
.child2, 
 
.image { 
 
    flex-grow: 1; 
 
    flex-basis: 50%; 
 
} 
 

 
.child2 { 
 
    order: 1; 
 
} 
 

 

 
/*DEMO STYLES ONLY*/ 
 

 
.parent { 
 
    height: 6em; 
 
    width: 18em; 
 
    background: rgba(90, 90, 90, .2) 
 
} 
 

 
.parent>div { 
 
    height: 2.5em; 
 
    outline: 1px solid red; 
 
} 
 

 
[class] { 
 
    position: relative; 
 
} 
 

 
[class]::after { 
 
    color: rgba(65, 65, 65, .8); 
 
    content: attr(class); 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<div class="parent"> 
 
    <div class="child1"></div> 
 
    <div class="child2"></div> 
 
    <div class="image"><div> 
 
</div>

值得注意的性质是

• flex-wrap它可以让你有不止一行
• order，让你把一个项目在什么将是柔性的开始排序（没有任何其他项目得到order，让他们留在他们）
• flex-basis告诉物品在什么时候应该开始生长
• flex-grow这是可选的，但如果你选择了它，就会有第二排该项目填补所有可用空间