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ü :
UstaDerslik
