v2.5.2
Giriş yap

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

suig
373 defa görüntülendi
1

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;

css html php
Cevap yaz
Cevaplar (1)
ebykdrms
820 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.

1
#011075