css flex box
merhaba arkadaşlar, css3 flex yapısını kullanarak aşağıdaki resimlerdeki görünümleri elde etmek istiyorum. gerçi sorun yaşadığım yer 100% Text yazdığım yeşil alan. o yeşil alanı 100% yaptığım zaman kapsayıcı div'i baştan sona kadar uzatıyor. kareler position değeri relative yeşil ananın positoun derei ise absolute.. bu arada R1,R2,R3,R4 olarak ifade ettiklerim resim... işin içinden çıkamadım bi el atsanız sevinirim :)
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
display grid kullanırsan daha kolay olur . kart yapısı içn genel bir div kullansan düzelir gibi . örn:
genel dive display:grid;grid-template-columns: repeat(4,1fr); grid-gap:5px; bu şekilde
<div class="card">
<div class="text"><span>TEXT</span></div>
<div class="bottom-text"><span>100% TEXT</span></div>
</div>
style{
.card{
width:100%;
height:100%;
display:flex;
flex-direction:column;
}
.card .bottom-text{
width:100%;
}
tüm özellikleri yazmadım ama bu şekilde çözebilirsin.