Esnek öğelerin genişlikte büyümesini sağlamak için ancak gerektiğinde yalnızca yükseklik sağlamak için zaten var mıdır? Flexbox'ı seviyorum, ancak üst üste gelen esnek öğelerin hepsini doldurmak için yeterli içerik olmadığında bile aynı boyuta kadar büyüdüğünü ve daha sonra sayfada daha fazla öğe görüntülediğini görüyorum. İdeal olarak, daha önceki eşyalar, kutuyu doldurmak için yeterli içeriğe sahip olmadıklarında ve büyük bir alan bırakmamaları durumunda, kendilerini uygun alanlara yerleştirmek için esnek öğeler kullanmak isterim.Genişlikteki (yatay olarak) büyütülecek ancak yükseklikte değil (dikey olarak) esnek kutu istiyorum (dikey olarak)
Bu benim bilgi eksikliğim mi yoksa mümkün değil mi? Mümkün değilse, tesis vb güncellemeleri
(Üzgünüm. Açıklamaya diyagramlar yüklemeye çalıştı ama itibarım yeterli değildir!)
[EDIT eklenebilir. Kod istek olarak eklendi. Bazı stil beyaz boşluk diğer esnek öğeler tarafından alınacak istiyorum göstermek için ayrıldı.]
<!doctype html>
<html>
<head>
<style>
.content {
font-size: 2em;
width: 100%;
margin: 0px;
padding: 0px;
background-color: coral;
display:flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
align-items: flex-start;
}
.flex-item {
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 0;
flex-basis:40vw;
background-color: rgba(255, 255, 255, 0.9);
border: 2px solid white;
border-radius: 2px;
margin: 2vmin;
padding: 2vmin;
}
</style>
</head>
<body>
<div class="content">
<div class="flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu venenatis nisi. Sed nec purus consectetur, sodales mi vel, efficitur arcu. Vivamus id congue quam. Fusce imperdiet bibendum egestas. Mauris porttitor risus id pharetra pharetra. Vivamus et lorem erat. Nullam ac nulla ex. Nulla sit amet semper ligula. Integer augue sem, pharetra in ex ut, finibus mollis neque. Integer vulputate dolor massa, a maximus sem vehicula malesuada. Morbi a nulla ornare, egestas nisl in, ultrices est. Integer ut maximus elit. Cras ac velit condimentum, dapibus dui quis, mattis ex.
</div>
<div class="flex-item"><img src="https://pixabay.com/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%">
</div>
<div class="flex-item">Vivamus semper at tortor a lacinia. Nulla a suscipit felis. Aliquam erat volutpat. Integer dignissim suscipit nibh a accumsan.Fusce gravida nisl nec elit placerat porta. Ut feugiat feugiat lorem nec commodo. Morbi porttitor vel sapien id tincidunt. Vivamus venenatis pellentesque tempus.
</div>
<div class="flex-item"><img src="https://pixabay.com"/get/ec8630811c846e5862cb/1442266437/wheat-797086_1280.jpg" width="100%"> </div>
</div>
</body>
</html>
Metin, resim veya her ikisini de içeren Flex öğesi kutuları vardır. Mevcut alana görüntü ölçeği içeren Flex öğesi kutuları. Yüksek çözünürlüklerde, metin yalnızca kutular aynı genişlik ve yükseklikte (kare) olduğundan, resimler tamam (kare) ölçeklendirir ve hepsi parçalayıcıdır. Bununla birlikte, 400 px genişliğindeki viewport'larda, sadece metin içeren kutular uzun hale gelir (argüman uğruna 200 x 1000 piksel) ve görüntü kutuları 200 x 200 pikseldir (kare). Bir sonraki satır daha sonra, esnek madde metninin altından sonra görüntünün altında büyük bir boşluk bıraktığını gösterir (800 piksel yüksek). Diğer esnek kutular, büzülmüş görüntüden sonra uzaya sığabilir, ancak boşluğa geçmezler. Soruyu beklemeye alan insanlar mı?
HTML kodunu gönderin. Ayrıca, CSS'nizin sorularınızla (yani, renk, kenarlık, her neyse) alakası olmayan bölümlerini de lütfen düzeltin. Şemalarınızı bir resim barındırma sitesine yükleyin ve ardından onlara bağlayın. – BryanH
Sorununuzu açıklamak için bir görüntü göndermeniz gerekiyorsa, [TinyPic] (http://tinypic.com/) veya benzeri bir adrese gönderin ve URL'yi sorunuza ekleyin. Resim gerçekten yardımcı olursa, daha yüksek bir kullanıcı soruna ekleyecektir. –