Ширина управления отдельными детьми в гибком контейнере

Question

Я пытаюсь добиться эффекта, когда коробки с надписью «HALF» занимают только 50% ширины (они же разделяют первый ряд равномерно).

Основная потребность в том, чтобы они оставались в одном контейнере. Можно ли это использовать с помощью flexbox?

Я пытался играть с flex-grow, flex-shrink и flex-basis, но я боюсь, что я не понять, как заставить его работать, или, если это вообще возможно, учитывая одно требование контейнера.

Рассмотрим эту скрипку: http://jsfiddle.net/GyXxT/270/

div { 
 
    border: 1px solid; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.child { 
 
    
 
    height: 200px; 
 
} 
 
.child.half { 
 
    flex: 1 1 10em; 
 
    color: green; 
 
} 
 

 
.child:not(.half) { 
 

 
    flex-shrink: 2; 
 
    flex-basis: 50%; 
 
    color: purple; 
 
}

<div class="container"> 
 
    <div class="child half"> 
 
    HALF 
 
    </div> 
 
    
 
    <div class="child half"> 
 
    HALF 
 
    </div> 
 
    
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
</div>

Answer 1

Вместо flex-direction: column, вы можете попробовать оберточной Flexbox с использованием flex-wrap: wrap; и вы можете установить:

1. flex-basis: 50% для полуширины дивы

2. flex-basis: 100% для полной ширины дивы

Смотрите, что я бросил в box-sizing: border-box для корректировки ширины при использовании flex-basis.

См демонстрационный ниже:

div { 
 
    border: 1px solid; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 400px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.child { 
 
    height: 200px; 
 
} 
 
.child.half { 
 
    flex-basis: 50%; 
 
    color: green; 
 
} 
 
.child:not(.half) { 
 
    flex-basis: 100%; 
 
    color: purple; 
 
}

<div class="container"> 
 
    <div class="child half"> 
 
    HALF 
 
    </div> 
 

 
    <div class="child half"> 
 
    HALF 
 
    </div> 
 

 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
</div>

Answer 2

Сгибание проклеивающие свойства - flex-grow, flex-shrink, flex-basis и flex - работа только вдоль главной оси из гибкого контейнера.

Поскольку ваш контейнер равен flex-direction: column, основная ось является вертикальной, и эти свойства контролируют высоту, а не ширину.

Для калибровки гибких элементов по горизонтали в контейнере с колонками вам понадобится имущество width.

(Вот более подробное объяснение: What are the differences between flex-basis and width?)

Для достижения макета с одним контейнером, см another answer to this question.

Если вы хотите остановиться в колонке, вам необходимо обернуть элементы .half в их собственный контейнер.

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 400px; 
 
} 
 
.container > div:first-child { 
 
    display: flex; 
 
} 
 
.child.half { 
 
    flex: 1 1 10em; 
 
    color: green; 
 
    width: 50%; 
 
} 
 
.child { 
 
    height: 200px; 
 
    width: 100%; 
 
    border: 1px solid; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div><!-- nested flex container for half elements --> 
 
    <div class="child half">HALF</div> 
 
    <div class="child half">HALF</div> 
 
    </div> 
 
    <div class="child">FULL</div> 
 
    <div class="child">FULL</div> 
 
    <div class="child">FULL</div> 
 
    <div class="child">FULL</div> 
 
</div>

Answer 3

Основание требование состоит в том, что они остаются в одном контейнере.

Это также может быть сделано без flexbox, просто плывут на 2 half элементы

div { 
 
    border: 1px solid; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 400px; 
 
} 
 
.child { 
 
    height: 200px; 
 
} 
 
.child.half { 
 
    float: left; 
 
    width: 50%; 
 
    color: green; 
 
} 
 
.child:not(.half) { 
 
    width: 100%; 
 
    color: purple; 
 
}

<div class="container"> 
 
    <div class="child half"> 
 
    HALF 
 
    </div> 
 
    <div class="child half"> 
 
    HALF 
 
    </div> 
 
    
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
    <div class="child"> 
 
    FULL 
 
    </div> 
 
</div>