Как сделать inline-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

Одним из способов было бы включить 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

Использование гибкого окна, самый эффективный способ, которым я могу видеть делать это с этим:

.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, который не является обязательным, но если вы его выбрали, придется пункт на втором ряду заполнить все доступное пространство