netbozum
wmaraci reklam

Css flex hakkında sorum

4 Mesajlar 595 Okunma
Toplam 4 mesaj ve 595 görüntüleme
acebozum
KaplanBozum

imsomnia imsomnia Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 03.12.2016
  • Yaş/Cinsiyet 30 / E
  • Meslek web developer
  • Konum İstanbul Anadolu
  • Ad Soyad C** S**
  • Mesajlar 209
  • Beğeniler 37 / 37
  • Ticaret 0, (%0)
Merhaba;

Css ile şöyle bir şey yapmak istiyorum flex kısmında divleri ortalayabiliyorum fakat 2 tane en üstte diğerleri altında sıralansın istiyorum fakat eklediğim tüm divler tek bir satırda oluyor 2 div ekledikten sonra alt satıra nasıl geçebilirim ?

Teşekkürler.

 

 

wmaraci
reklam

91604 91604 WM Aracı Anonim Üyelik
  • Üyelik 02.06.2018
  • Yaş/Cinsiyet - /
  • Meslek
  • Konum
  • Ad Soyad ** **
  • Mesajlar 41
  • Beğeniler 4 / 20
  • Ticaret 7, (%100)
kodları buraya eklerseniz daha rahat yardımcı olabiliriz.Çünkü bu durumun birden fazla sebebi olabilir.
 

 

imsomnia imsomnia Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 03.12.2016
  • Yaş/Cinsiyet 30 / E
  • Meslek web developer
  • Konum İstanbul Anadolu
  • Ad Soyad C** S**
  • Mesajlar 209
  • Beğeniler 37 / 37
  • Ticaret 0, (%0)
dnapick Hocam kodlarım : https://codepen.io/Csulu/pen/pxQBzK
 

 

91604 91604 WM Aracı Anonim Üyelik
  • Üyelik 02.06.2018
  • Yaş/Cinsiyet - /
  • Meslek
  • Konum
  • Ad Soyad ** **
  • Mesajlar 41
  • Beğeniler 4 / 20
  • Ticaret 7, (%100)
Kapsayıcı div genişliği içerdeki divlerden daha geniş olduğu için flex ile bunu yapman zor olur.
Daha doğrusu ana div içesine gizli bir div oluşturup (400px) onu flex kapsayıcısı yaparsan flex ile yapabilirsin.

Ya da bunun için geliştirilmiş CSS Grid yapısını kullanabilirsin.İşlem daha kolay olur.




1


2


3






.kapsayici {
display: grid;
grid-gap : 20px 20px;
grid-template-columns: 100px 100px;
justify-content: center;
align-items: center;
width: 1200px;

}

.kapsayici div {
width: 200px;
background: red;
border: 1px solid #333;
}
 

 

wmaraci
wmaraci
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al