Text i çözünürlüğe göre hareket ettirmek
Merhaba alt taraftaki gibi bir profile card hazırladım fakat tasarımın responsive olmasını istiyorum boyutları arttırdıkça takipçi alanının da sağ tarafa kaymasını istiyorum nasıl yapabilirim?
<img src="https://i.hizliresim.com/rtdrhl8.png">
<img src="https://i.hizliresim.com/njp5kov.png">
<div class="card">
<div class="imageSide">
<img src="https://picsum.photos/100" />
</div>
<div class="informationSide">
<div class="information">
<strong>120.235</strong>
<span>TAKİPÇİLER</span>
</div>
<div class="information">
<strong>120.235</strong>
<span>TAKİP EDİLEN</span>
</div>
</div>
</div>
.card, .card * {
display:flex;
margin:0;
padding:0;
flex-direction:column;
}
.card {
width:350px;
border:1px solid gray;
border-radius:10px;
background:#09c;
flex-direction:row;
align-items:center;
justify-content:space-between;
}
.card > .imageSide {
}
.card > .imageSide > img {
border-radius:50%;
width:100px;
margin:15px;
}
.card > .informationSide {
flex-direction:row;
flex-wrap: wrap;
align-items:center;
justify-content:flex-end;
margin-left:auto;
}
.card > .informationSide > .information {
width:100px;
text-align:center;
padding:5px 15px;
}
.card > .informationSide > .information > strong {
font-size:22px;
}
.card > .informationSide > .information > span {
font-size:12px;
}
.card
elementinin width
değerini artırdığınızda, takip elementlerinin yan yana geldiğini görebilirsiniz.
Bunu sağlayan flex tasarımda kullanılan flex-wrap
özelliğidir.