如何使內聯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這是可選的，但如果你選擇了它，就會有第二排該項目填補所有可用空間