0
Kayıt Ol

Flexbox ile şu resimdeki gibi ürün mantığını nasıl oluştururum?

7

●

122

  • 18-10-2022, 02:51:03
    #1
    rufiqcavadov
    rufiqcavadov
    Merhaba. Dribbble sitesinde bir örnekte olduğu gibi şu resimdeki gibi bir flexbox ürün yapısı oluşturmak istiyorum. Sadece orta kısımda olan çerçeve içerisinde olan ürün yapısından bahsediyorum. Bir türlü yapamadım o şekilde.



  • 18-10-2022, 03:08:35
    #2
    YunusEmreCetin
    YunusEmreCetin
    kutu içerikleri float ile oluşturulabilir
    kutular ise basit flex ve gap ile oluşturulabilir
    asla ezberden gitme hocam
    https://www.w3schools.com/css/css3_flexbox.asp
  • 18-10-2022, 03:18:56
    #3
    rufiqcavadov
    rufiqcavadov
    Hocam bir örnek mümkünse yazabilir misiniz?

    Gerçekten 3 gündür uyumuyorum kod yazıyorum sürekli kafam çok karışık. Ondan sonra zaten geri dönüp kodlara bakacağım.
  • 18-10-2022, 06:13:41
    #4
    rufiqcavadov
    rufiqcavadov 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card {
            width: 270px;
            height: 170px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .price {
            align-self: flex-end;
        }
        .image {
            justify-content: flex-end;
            display: flex;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="title">Title</div>
            <div class="image">Image</div>
            <div class="price">Price</div>
        </div>
    </div>
</body>
</html>
  • 18-10-2022, 15:43:28
    #5
    YunusEmreCetin
    YunusEmreCetin
    https://codepen.io/emrecetin/pen/wvjbGga
    sana basit bir template çizdim hocam
  • 19-10-2022, 17:35:04
    #6
    rufiqcavadov
    rufiqcavadov
    YunusEmreCetin adlı üyeden alıntı: mesajı görüntüle
    https://codepen.io/emrecetin/pen/wvjbGga
    sana basit bir template çizdim hocam
    Hocam teşekkürler. Aslında bu tarz birşey çizmiştim ama ben align-self: flex-end; verip alt kısıma atmak istedim ben de diyorum neden olmuyor demek ki, öyle çalışmıyormuş herhalde bildiğimiz eski yöntemlerle yapılıyormuş o tarz şeyler.
  • 19-10-2022, 17:41:39
    #7
    YunusEmreCetin
    YunusEmreCetin
    rufiqcavadov adlı üyeden alıntı: mesajı görüntüle
    Hocam teşekkürler. Aslında bu tarz birşey çizmiştim ama ben align-self: flex-end; verip alt kısıma atmak istedim ben de diyorum neden olmuyor demek ki, öyle çalışmıyormuş herhalde bildiğimiz eski yöntemlerle yapılıyormuş o tarz şeyler.
    Rica ederim, her zaman.
    aslında bootstrap ile bu tarz şeyler daha basit ama öğrenirken css ile kendin yapmak en iyisi
  • 19-10-2022, 17:42:12
    #8
    rufiqcavadov
    rufiqcavadov
    Hocam bir de konu dışı olacak ama mesela ben figma ile basit tasarımlar çizip yukarıdaki örneklerle para kazanabilir miyim?

    Tabi bu konumuz dışı olacak ama kazandığım paralarla basit scriptler alıp incelemek adına konumu bu konuma getiriyorum tabi.