Szerokość kontrolki poszczególnych dzieci w giętkim pojemniku

Question

Próbuję osiągnąć efekt, w którym pola oznaczone jako "HALF", zajmują tylko 50% szerokości (równo dzielą pierwszy rząd równomiernie).

Podstawowym wymogiem jest to, że pozostają w jednym pojemniku. Czy można to osiągnąć za pomocą flexbox?

Próbowałem gry z flex-grow, flex-shrink i flex-basis ale obawiam się, że nie mam zrozumienia sposobu, aby to działało, lub jeśli jest to w ogóle możliwe, biorąc pod uwagę wymóg pojedynczy pojemnik.

Rozważmy skrzypce: 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

Zamiast flex-direction: column można spróbować owijania schematu flexbox korzystając flex-wrap: wrap; i można ustawić:

1. flex-basis: 50% za pół div szerokość

2. flex-basis: 100% dla pełnych div szerokość

zobaczyć, że mam wrzucony box-sizing: border-box dostosować do szerokości przy użyciu flex-basis.

zobacz demo poniżej:

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 właściwości klejące - flex-grow, flex-shrink, flex-basis i flex - działają tylko wzdłuż głównej osiz elastycznego pojemnika.

Ponieważ twój pojemnik to flex-direction: column, główna oś jest pionowa, a te właściwości kontrolują wysokość, a nie szerokość.

Do wymiarowania elementów elastycznych poziomo w pojemniku skierowanym w kierunku kolumny potrzebna jest właściwość width.

(Oto bardziej szczegółowe wyjaśnienie: What are the differences between flex-basis and width?)

Aby osiągnąć swój układ z jednym pojemniku, zobacz another answer to this question.

Jeśli chcesz pozostać w kierunku kolumny, musisz owinąć elementy .half we własnym pojemniku.

.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

Wymóg zasadą jest, że pozostają one w jednym pojemniku.

To może być również wykonane bez flexbox, po prostu unosić się 2 half elementy

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>