«flexbox» etiketlenmiş sorular

"Floaty" düzenlerden uzaklaşmayı ve gelecekteki projeler için CSS flexbox'ı kullanmayı planlıyorum. Mevcut sürümlerindeki tüm büyük tarayıcıların (bir şekilde) flexbox'ı desteklediğini görmekten çok memnun oldum. Bazı örneklere bakmak için "Flexbox tarafından Çözüldü" e gittim . Ancak "Sabit Altbilgi" örneği, Internet Explorer 11. I'de işe görünmüyor biraz etrafında oynanan ve ekleyerek çalışmalarına …

117 html  css  flexbox  cross-browser 

Sayfada ortalanmış bazı Lipsum içeriğine sahip basit bir web sayfam var. Sayfa, Chrome ve Firefox'ta iyi çalışıyor. Pencerenin boyutunu küçültürsem, içerik pencereyi kapayana kadar doldurur ve ardından bir kaydırma çubuğu ekleyip içeriği ekranın dışına, aşağıya doğru doldurur. Ancak, sayfa IE11'de ortalanmıyor. Gövdeyi esneterek sayfanın IE'de ortalanmasını sağlayabilirim, ancak bunu yaparsam, …

116 internet-explorer  css  flexbox  internet-explorer-11 

CSS esnek kutu modelini kullanarak bir görüntüyü en boy oranını korumaya nasıl zorlayabilirim? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Kabın genişliğini doldurmak için görüntülerin uzadığına veya küçüldüğüne dikkat edin. Sorun değil, ancak görüntü oranlarını korumak için yüksekliği uzatabilir veya kısaltabilir miyiz? HTML <div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> …

114 html  css  flexbox 

Bunu Flexbox kullanarak elde etmenin imkansız olduğunu anlıyorum, çünkü her satır yalnızca öğelerine uyması için gereken minimum yükseklik olabilir, ancak bu daha yeni CSS Izgarası kullanılarak elde edilebilir mi? Açık olmak gerekirse, sadece her satır için değil, tüm satırlarda bir ızgaradaki tüm öğeler için eşit yükseklik istiyorum. Temel olarak, en …

113 css  flexbox  grid-layout  css-grid 

Bu konuda biraz takıldım ve bu position: sticky+ flexbox gotcha'yı paylaşacağımı düşündüm : Yapışkan div'im, görüşümü bir esnek kutu kapsayıcısına değiştirene kadar iyi çalışıyordu ve birdenbire, bir flexbox ebeveynine sarıldığında div yapışkan değildi. .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: …

107 css  flexbox  css-position  sticky 

Flexbox kullanarak tam yükseklikte bir uygulama kullanmak istiyorum. display: box;Bu bağlantıda eski flexbox düzen modülünü ( ve diğer şeyleri) kullanarak istediğimi buldum : CSS3 Flexbox tam boy uygulaması ve taşma Bu, yalnızca flexbox CSS özelliklerinin eski sürümünü destekleyen tarayıcılar için doğru bir çözümdür. İle bir kap kullanılarak: Ben daha yeni …

106 html  css  flexbox 

Bende var <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> Ebeveyn var .parent { display: flex; } İlk çocuğum için öğeyi sağa doğru kaydırmak istiyorum. Ve diğer div'lerim, ebeveyn tarafından belirlenen esneklik kuralını takip edecek. Bu mümkün bir şey mi? Değilse, nasıl düşük float: rightesneklik …

103 html  css  flexbox 

Bir flexbox düzen satırının bir tarayıcı penceresinde kalan dikey alanı kullandığını nasıl anlarım? 3 sıralı flexbox düzenim var. İlk iki satır sabit yüksekliktedir, ancak 3. satır dinamiktir ve tarayıcının tam yüksekliğine kadar büyümesini istiyorum. Satır 3'te bir dizi sütun oluşturan başka bir flexbox'ım var. Bu sütunlardaki öğeleri düzgün şekilde ayarlamak …

102 html  css  flexbox 

Aşağıda gösterildiği gibi görünen CSS esnek kutu düzenini kullandım: Ekran küçülürse şuna dönüşür: Sorun, görüntülerin orijinal görüntüden en boy oranı korunarak yeniden boyutlandırılmamasıdır. Ekran küçülürse görüntülerin yeniden boyutlandırılmasına izin vermek için saf CSS ve esnek kutu düzenini kullanmak mümkün müdür? İşte benim html'im: <div class="content"> <div class="row"> <div class="cell"> <img …

99 html  css  flexbox 

Bu soru, flexbox dahil tam css3 desteğine sahip bir tarayıcıyla ilgilidir. İçinde bazı öğeler bulunan esnek bir kabım var. Hepsi flex-start için haklı ancak son .end öğenin flex-end'e haklı gösterilmesini istiyorum . Bunu HTML'yi değiştirmeden ve mutlak konumlandırmaya başvurmadan yapmanın iyi bir yolu var mı? .container { display: flex; flex-direction: …

97 css  flexbox 

Sorunu çözmek için yardıma ihtiyacım var, içeriği bootstrap4'teki sütunun içinde ortalamam gerekiyor, lütfen aşağıda kodumu bulun <div class="container"> <div class="row justify-content-center"> <div class="col-3"> <div class="nauk-info-connections"> </div> </div> </div>

95 twitter-bootstrap  flexbox  bootstrap-4 

Örneklem: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> Kod parçacığını çalıştırınHide resultsSnippet'i genişlet İki sorum var, lütfen: Neden temelde başınıza geliyor span? Esnek bir kaptaki diğer esnek öğeleri etkilemeden gerilmesini önlemek için doğru yaklaşım nedir?

94 html  css  flexbox 

divDiğer unsurları ve merkezdeki alt unsurunu etkilemeden ekranın üst kısmına bir çubuk yapmak istiyorum . .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> Kod parçacığını çalıştırınSonuçları gizleSnippet'i genişlet position: absoluteSatırı eklediğimde justify-content: centergeçersiz oluyor. Birbirleriyle çatışıyorlar mı ve çözüm nedir? DÜZENLE Teşekkürler çocuklar, bu …

93 css  react-native  flexbox 

Görünüşe göre position:absolutekullanımda bir öğe justifyContentveya kullanılarak ortalanamaz alignItems. marginLeftCihazın yüksekliğini ve genişliğini algılamak için boyutları kullansa bile tüm cihazlar için aynı şeyi göstermeyen bir geçici çözüm var . bottom: { position: 'absolute', justifyContent: 'center', alignItems: 'center', top: height*0.93, marginLeft: width*0.18, }, bottomNav: { flexDirection: 'row', },

93 position  react-native  flexbox  absolute 

İki esnek ürün içeren bir esnek kabım var. İkinciye bir kenar boşluğu ayarlamak istiyorum, ancak yalnızca sarıldığında ve ilk esnek çizgide değil. Mümkünse medya sorgularını kullanmaktan kaçınmak istiyorum. İlk elemandaki marj-alt bir çözüm olabilir diye düşündüm. Bununla birlikte, elemanlar sarılmadığında altta boşluk ekler, bu yüzden aynı sorun. Bu benim kodum: …

93 css  margin  flexbox