Daha önce bu konuda bir makale yazmıştım. 100% Genişlik ve 100% Yükseklite Sayfa İskeleti Hazırlama bağlantısını tıklayarak makaleye erişebilirsiniz. Aynı yapıyı flex ile yapsam nasıl olur bir bakalım.

Bu yapının bize sağladıklarını listelersek.

  • Esnek iç alan ve sabit yan kolonlarımız var
  • Eşit kolon yüksekliğimiz var
  • Sticky footer özelliği var

Flex ile bu işi yapalım.

HTML kodu;

<header>Üst alan</header>
<div class="kapsayici">
  <main class="iceri-alani">There are many variations of passages of Lorem Ipsum available, but the majority...
  </main>
  <nav class="menu">Sol Menü</nav>
  <aside class="reklam">Sağ alan</aside>
</div>
<footer>Alt Alan</footer>

Flex ile sayfa dibine yapışık alt alanlar (sticky footer) yapmak yazısında gördüğümüz gibi orta alanın tam sayfayı kaplaması ve alt alanın dibe yapışması için:

body {
  display: flex;
  margin: 0;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}

.icerik-alani-kapsayici {
  display: flex;
  flex: 1;
}

Tanımlarını yapıyoruz.

Menü ve reklam alanlarını eşit kolonlu yapmak ve menü kısmını sol tarafa koymak için:

.icerik-alani {
  flex: 1;
}

.menu, .reklam {
  flex: 0 0 12em;
}

.menu {
  order: -1;
}

Uyumlu web kısmını ve mobili önceliklendirdiğimiz de şöyle bir kod ortaya çıkıyor.

.kapsayici {
		display: flex;
 	flex: 1 0 auto;
		flex-direction: column;
}

.menu {
 	order: -1;
 	background-color: #449fdc;
}

@media (min-width: 768px) {
  .kapsayici {
  	flex-direction: row;
  }
  .iceri-alani {
    flex: 1;
    padding: 20px;
    margin: 0;
  }
  .menu, .reklam {
    flex: 0 0 12em;
  }
}

Sonuç

Eski koda göre flex ile kodladığımız sayfanın eskiye göre çok fazla avantajı var.

  • Daha az kod
  • Daha sade kod
  • Uyumlu web desteği ve mobil önceliği
  • SEO açısından daha avantajlı kod

Kalın sağlıcakla.

Kaynaklar

jQuery closest yerine closest() metodunu kullanalım

jQuery'de nkurtulma yöntemlerine devam ediyoruz. Bu sefer closest anlattık Devamını oku

Terminali (iTerm) güzelleştirmek ve iyileştirmek

19 September 2018 tarihinde yayınlandı.

Kitap incelemesi Beyond jQuery - Nicholus, Ray

12 September 2018 tarihinde yayınlandı.