Css Ders-30 Obje Hizalama - justify content
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Css Ders-30 Obje Hizalama - justify content

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2234)
RAPOR ET
Css serimize devam ediyoruz.Bu derste justify-content komutunu anlatacağım.Justify content objeleri kapsayıcı divin içinde hizalamamızı sağlıyor.

İncele : http://ustaderslik.com/ornek/css-hizalama.html

İndir : ustaderslik.com/ornek/css-hizalama.zip

Daha öncede http://ustaderslik.com/konu/CSS_Ders-24_Flex_Kullanımı objeleri kapsayıcı div içine sığdıran flexi anlatmıştım.Hizalama işlemi yapmak için ise objeyi flex yapıp justify content ile hizalıyoruz.Bir kaç parametresi mevcut bunları inceleyelim.

1-space-around : Tüm objeleri aralarında eşit boşluk olacak şekilde hizalıyor.
2-space-between: Tüm objeleri aralarında eşit boşluklarla hizalar ama başta ve sonda boşluk olmaz.
3-flex-start : Tüm objeleri sağ hizalar.
4-flex-end : Tüm objeleri sola hizalar.
5-center : Tüm objeleri aralarında boşluk olmayacak şekilde ortalar.

Parametreleri bunlar.
.kapsayaci{display:flex;justify-content:}


Genel Örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
.ana{width:400px;height:100px;padding-top:25px;padding-bottom:25px;margin:auto;border:1px solid #ddd;display:flex;}
#a1{justify-content:space-around;}
#a2{justify-content:space-between;}
#a3{justify-content:flex-start;}
#a4{justify-content:flex-end;}
#a5{justify-content:center;}
.kutu{width:100px;height:100px;background:#15d4f5; }
</style>
</head>
<body>

<div class="ana" id="a1">
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
</div>

<div class="ana" id="a2">
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
</div>

<div class="ana" id="a3">
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
</div>

<div class="ana" id="a4">
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
</div>

<div class="ana" id="a5">
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
</div>


</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/54fdsf1d81g.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol