Esnek elemanın çocuk elemanını görmezden gelmesini sağlayın

Esnek elemanın çocuk elemanını görmezden gelmesi mümkün mü, bu yüzden boyut diğer elemanları etkilemiyor mu? Örneğin, display: flex numaralı bir sarıcıya sahibim. Bir üstbilgi, içerik ve altbilgiye sahiptir.Esnek elemanın çocuk elemanını görmezden gelmesini sağlayın

<div class="wrapper"> 
    <header></header> 
    <article></article> 
    <footer></footer> 
</div>

ben sarıcı başlık etiketini (başlık penceresinin üst kısmına sabit olacak) göz ardı etmek istiyorum. Makale, flex: 1 olarak ayarlanacak ve bu sayede alanın kalan kısmını kaplayacak ve altbilgiyi sayfanın altına zorlayacaktır. İşte bazı örnek CSS geçerli:

.wrapper { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    padding-top: 50px; /* Accounts for header */ 
} 

header { 
    height: 50px; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

article { 
    flex: 1; 
} 

footer { 
    height: 50px; 
}

Ben sadece sarmalayıcının dışına başlığını hareket olabilir biliyorum ama bu biraz daha zor hale getirecek mevcut bir sürü kod var. İstediğim şey mümkün mü?

kaynak

2016-10-03 Sean

Tam çalışma örneği gönderir misiniz? (snippet) – Amit

http://stackoverflow.com/q/39069320/3597276 –

Firefox ile çalışıyor musunuz? –

.Wrapper'ı display:flex olarak bildirdiğinizde, otomatik olarak tüm alt öğe öğelerini display:flex-item olarak bildirirsiniz. Gizli bildirimi,

kaynak

2016-10-04 14:33:49

Şu anda buradayım aynı durum ve çözüm işe yaramadı. Esnek alt öğe öğelerinden birinde 'display: block' ayarladıktan sonra, hala bir esnek öğe öğesi olarak davranıyor. Herhangi bir ipucu? –

Hangi şekilde bir esnek madde gibi davranıyor? Bakmak için bir CodePen sağlayabilir misiniz? –

Aynısını, doğrudan bir çocuğun, sizin durumunuzda esnek bir öğe olarak nasıl davrandığını merak ediyorum. Flex-item nedir? Bildiğim tek esnek ilgili ekran türleri, 'flex' ve 'inline-flex'. Demek istediğim, çocuğun hala esnek bir öğe olarak davrandığını (kullandığınız terimin aynısını kullanmaya çalışarak), diğer kardeşlerle esnek boyutlandırma ve konumlandırmaya katılma ve göz ardı edilmemesi anlamına geliyor. –

ile ilgili bir şeyle geçersiz kılabilirsiniz. .wrapper'ınızda flex-wrap: wrap bildir. Daha sonra başlığınız için, başlığın altındaki her şeyi zorlayacak olan flex-basis: 100% stilini ekleyebilirsiniz.

kaynak

2017-04-20 16:22:02

Bu tamamen kabul edilen cevap olmalıdır. –

flex-shrink: 0 alt öğelerini, kabın doldurulması için küçültülmesini önlemek için alt öğelerin üzerinde kullanabilirsiniz. Ve kapsayıcı/sarıcı üzerinde flex-wrap: wrap kullanın, böylece çocuklarınız aşağı doğru sarılacaktır.

kaynak

2018-01-20 03:24:37 Alexander

Esnek elemanın çocuk elemanını görmezden gelmesini sağlayın

cevap

İlgili konular