Web sayfasi tasarlarken bir içerigi dikey olarak hizalamak çogu zaman bizim için problem olmaktadir. Internette bu islem için bir çok örnek ve püf noktasi bulmak mümkün, fakat çogu çözümde hizlamak istedigimiz nesneleri kapsayan ana elementin sabit tanimlanmis bir yükseklige sahip olmasi gerekmektedir ve buda CSS kullaniminda sorun olusturmaktadir.
Neyseki CSS3 "CSS Flexible Box Layout Module" diye adlandirilan yeni bir layout sunmakta. Bu yeni Flexbox container(tasiyici) içinde bulunan nesnelerin hizalama ve yönlendirilmesine 'önceden tanimli veya dinamik bir boyutu olmasa bile' izin vermekte. Bu esnek container var olan boslugu doldurabilmek için barindirdigi nesnelerin yükseklik ve genisliklerini degistirebilir. Bu özellik farkli ekran boyutlarinda da çok ise yaramaktadir.
Örnegin web sayfamizdaki tüm elemanlari dikey olarak ortalamak için asagidaki CSS kodunu kullanabiliriz:
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
}
Yukaridaki örnegi denemek için bu linki kullanin.
Bu yeni containeri destekleyen browserlarin asagidaki gibi
- Android 4.4+
- Chrome 29+
- Firefox 28+
- Internet Explorer 11+
- iOS 7.1+ (prefixed with -webkit-)
- Opera 17+
- Safari 6.1+ (prefixed with -webkit-)
Ayrica destekleyen browser listesini bu linkten detayli görebilirsiniz.
Bu makale Toptal.com blogunun izni ile türkçeye çevirilmistir. Orjinal içerige bu linkten erilebilirsiniz.