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.

HTML Öznitelikleri ve DOM özellikleri

**DOM (Belge Nesnesi Modeli)** HTML ile javascript'i birbirine bağlar. DOM, HTML dokümanındaki tüm elamanları ağaç yapısı mantığıyla nesn...… Devamını oku

CSS3 ile resimleri oranını koruyarak sığdırma

20 November 2017 tarihinde yayınlandı.

jQuery'ye büyük darbe Javascript ve seçiciler - 2

21 September 2017 tarihinde yayınlandı.