v2.5.2
Giriş yap

Text i çözünürlüğe göre hareket ettirmek

suig
363 defa görüntülendi

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&quot;&gt;
<img src="https://i.hizliresim.com/njp5kov.png&quot;&gt;

ebykdrms
788 gün önce
<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.