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

CSS Izgara çizgi isimlendirmesi ve kullanımı

CSS Izgara çizgi isimlendirmesi ve kullanımı. Izgara çizgileri ne işe yarar? Devamını oku

fr birimi

07 March 2019 tarihinde yayınlandı.