Esnek bir ürün nasıl yapılır esnek kabın yüksekliğini doldurmaz?

Question

Aşağıdaki kodda gördüğünüz gibi, esnek kabın içindeki sol div, sağ div yüksekliğini karşılamak için uzanır. Yüksekliğini, içeriğini tutmak için gereken minimum miktarı ayarlamak için ayarlayabileceğim bir özellik var mı (her zamanki gibi esnek kapların dışındaki height: auto div'ler gibi)?

Answer 1

align-items

#a { 
 
    display: flex; 
 
} 
 
#a > div { 
 
    background-color: red; 
 
    padding: 5px; 
 
    margin: 2px; 
 
} 
 
#b { 
 
    height: auto; 
 
}

<div id="a"> 
 
    <div id="b">left</div> 
 
    <div>right<br>right<br>right<br>right<br>right<br></div> 
 
</div>

veya sırasıyla align-content özellik bu davranışını denetler.

align-items ürün flex-direction dik, varsayılan flex-directionrow olduğunu olması kaçınılmaz hale dikey yerleştirme align-items ile kontrol edilebilir konumlandırma tanımlar. Ayrıca, öğe bazında hizalamayı kontrol etmek için align-self özniteliği vardır.

#a { 
 
    display:flex; 
 

 
    align-items:flex-start; 
 
    align-content:flex-start; 
 
    } 
 

 
#a > div { 
 
    
 
    background-color:red; 
 
    padding:5px; 
 
    margin:2px; 
 
    } 
 
#a > #c { 
 
    align-self:stretch; 
 
}

<div id="a"> 
 
    
 
    <div id="b">left</div> 
 
    <div id="c">middle</div> 
 
    <div>right<br>right<br>right<br>right<br>right<br></div> 
 
    
 
</div>

css-hileler konuda mükemmel bir article sahiptir. Birkaç kez okumanızı tavsiye ederim.

Answer 2

Esnek bir kap oluşturduğunuzda, çeşitli varsayılan esnek kurallar devreye girer.

Bu varsayılan kuralların ikisi, flex-direction: row ve align-items: stretch'dur. Bu, esnek öğelerin otomatik olarak tek bir sıraya hizalanacağı ve her öğenin kabın yüksekliğini dolduracağı anlamına gelir.

yazdığın gibi, yani – germek esnek öğeleri istemiyorsanız:

yüksekliği içeriğini

tutmak için gerekli olan minimum yapmak basitçe o zaman ... Varsayılanı align-items: flex-start ile geçersiz kılın.

#a { 
 
    display: flex; 
 
    align-items: flex-start; /* NEW */ 
 
} 
 
#a > div { 
 
    background-color: red; 
 
    padding: 5px; 
 
    margin: 2px; 
 
} 
 
#b { 
 
    height: auto; 
 
}

<div id="a"> 
 
    <div id="b">left</div> 
 
    <div> 
 
    right<br>right<br>right<br>right<br>right<br> 
 
    </div> 
 
</div>

İşte align-items ve nasıl kapsayıcı içindeki esnek öğeleri konumlandırmak için beş değerlerini vurgular flexbox spec gelen bir açıklama verilmiştir. Daha önce belirtildiği gibi, stretch varsayılan değerdir.

^{Kaynak: W3C}