Yaklaşık 6 sene önce bu başlığa yakın bir başlık ile bir makale yazmışım. Yatay ve Dikeyde Ortalı Alanlar Oluşturmak yeni gelen özellikler ile bu kodu daha basit nasıl yapabilirim diye bakınırken flexbox özelliği aklıma geldi.

Peki flexbox ile bu işi nasıl yaparım.

HTML kodu aynı olsun;

<div class="orta-alan">
  <p>Fatih Hayrioğlu'nun not defteri</p>
</div>

Bazı ufak değişiklikler var. Eskiden id ve camelCase iken şimdi class ve kebap-case‘e geçtim.

CSS kodunun başında değişen bir şey yok.

html, body {
  height: 100%;
}

body{
  margin:0;
  padding:0;
  background-color:#D2D2D2;
  font:24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#333333;
}

Değişen kısım.

.orta-alan {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

align-items: center; dikeyde ortalamak için, justify-content: center; yatayda ortalamak için yeterli. Tabi bu elemanın flex olduğunu göstermek için display: flex; tanımını başta yapmalıyız.

Genişlik ve yükseklik burada tam sayfa kullandığımız için 100% verildi. Tabi siz istediğiniz genişlik ve yükseklik tanımını yaparak çalışabilirsiniz.

Kalın sağlıcakla.

Javascript ile medya kontrolü

CSS ile birlikte çok fazla medya kontrolünü kullanıyoruz.{% highlight css %}/* Smartphones (portrait) ----------- [email protected] only screen an...… Devamını oku

Yenilenen Google Çeviri hizmeti

31 January 2017 tarihinde yayınlandı.

CSS ile çıktı alırken sayfa sonunu belirlemek

30 January 2017 tarihinde yayınlandı.