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.

HTML5 Spellcheck özniteliği

HTML5 Spellcheck özniteliği ile tarayıcı dil hatalarını açıp kapaya biliyoruz Devamını oku

jQuery closest yerine closest() metodunu kullanalım

29 September 2018 tarihinde yayınlandı.