Tüm öğelerin sarılmasını CSS flexbox ile zorlayabilir miyim?

Question

CSS Flexbox ile yerleştirdiğim üç blok elemanım var. (Benim durumumda, onlar <div>ider elemanın her iki tarafında iki <select>s olmak olur, ben bir Liste Oluşturucu kontrolünü inşa ediyorum.)

İstediğim geçerli:

• orta sahip olmak (bölücü) eleman mümkün olan minimum alan miktarını alır.
• Her iki uçtaki öğeye sahip olmak (yani: seçimlik kontroller) minimum genişliğe sahip olmak ve olası alanı doldurmak için büyür.
• yatay olarak her pozisyon için yeterince yatay alan yok olduğunda tüm elemanlar dikey olarak kaydırmak yapmak için: kap (tarayıcı genişliği ex) yeterli yatay alan olduğunda
• bir satırda her üç eleman da sahip olma.

flexbox'a bu noktaların hepsinin harika bir iş, son gereksinimi için hariç yapar. Hepsini bir satırda bulundurmak için yeterli alan yoksa, öğesinin tümünü zorlamak için zorlayamıyorum. Ben düzenini elde etmek oldukça basit FlexBox kurulum kullanıyorum

:

.container { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    align-items: center; 
} 

select { 
    flex-basis: 10em; 
    flex-grow: 1; 
} 

.divider { 
    flex-basis: 3em; 
    flex-grow: 0; 
    text-align: center; 
} 

bu sorunu budur

, bu kapsayıcı genişliği seçme biri artı bölücü için yeterince geniş herhangi miktara ayarlanırsa Bu, son seçiciyi bölücü değil, saracaktır. Çirkin görünen bir satırda bir artı artı ayırıcı alacağım.

http://jsfiddle.net/5s0yf74w/1/

genel FlexBox düzenini koruyarak CSS verdiği benim istenen sonucu elde etmek mümkün mü:

Bu keman sorunu göstermektedir?

Answer 1

JS tabanlı yineleme düzeni mantığı olmadan tam olarak istediğinizin mümkün olduğunu düşünmüyorum (tarayıcıyı oluşturma, genişlikleri hesaplama ve koşullu olarak sınıf ekleme/çıkarma). Bununla birlikte, this fiddle numaralı belgede verilen çözümün yalnızca bir CSS yaklaşımı olduğunu düşünüyorum. Temel olarak iki düzen, geniş biri sadece üç öğenin sarılı değil nerede tanımlamak kötü durumda önlemek için flex-wrap: nowrap; bir değişiklik yaptı. Ve , esnek yönü flex-direction: column;'a geçersiz kılan bir dar. Her ikisi de min-width aklı ile uygun bir medya-sorgu uygulanarak kolayca değiştirilebilir.

Answer 2

Tam olarak ne soruyorsunuz, ama (daha da iyi olabilir). Bölücü olmadan ayarlayabilirsiniz.gerektiğinde Sen bölücü yanılsaması alacak, ancak

#wide { 
 
    width: 31em; 
 
} 
 
#narrow { 
 
    width: 10em; 
 
    top: 100px; 
 
} 
 

 

 
.container { 
 
    position: absolute; 
 
    border: solid red 1px; 
 
    background-image: radial-gradient(circle at center, blue 5px, transparent 5px); 
 
} 
 
.fakecontainer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    margin-right: -1em; 
 
} 
 

 
select { 
 
    flex-basis: 11em; 
 
    flex-grow: 1; 
 
    
 
    margin-right: 1em; 
 
} 
 

 
select:nth-child (2) { 
 
    flex-basis: 10em; 
 
    
 
}

<div class="container" id="wide"> 
 
<div class="fakecontainer"> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
</div> 
 
</div> 
 
<div class="container" id="narrow"> 
 
<div class="fakecontainer"> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
</div> 
 
</div>

sadece fazladan bir eleman, fakecontainer gerektiğinde hiçbir bölücü, marjlar

Eğer bazı kesmek yapmak Eğer dar seçenek gerçekten bir bölücü istiyorsanız, sadece alt kenar boşluğu ile benzer bir hile yapmak gerekir (bu durumda bana bildirin)