Sayfa Düzeni ve Yönetimi – Flexbox

CSS Flexbox, web tasarımında responsive ve esnek düzenler oluşturmak için kullanılan bir araçtır. Bu makalede, CSS Flexbox’un temel kavramlarına ve özelliklerine genel bir bakış atacağız ve örneklerle açıklayacağız.

Flex Container ve Flex Item

CSS Flexbox, bir flex container (esnek konteyner) ve bir veya daha fazla flex item’dan (esnek öğeler) oluşur. Flex container, flex item’ları saran bir kutudur ve flex item’ların yatay veya dikey olarak hizalanmasını sağlar.

Flex Container’a Özellikler Ekleme

Bir div elementi veya başka bir elementi bir flex container olarak belirlemek için, display özelliğine flex değeri vermek gerekir. Örneğin:

.container {
  display: flex;
}

Bu kodla .container class’ına sahip olan element, bir flex container olarak belirlenir.

Flex Item’ların Özellikleri

Flex item’ların yatay veya dikey olarak hizalanmasını sağlamak için, justify-content ve align-items özellikleri kullanılır.

justify-content

justify-content özelliği, flex item’ları yatay olarak hizalamak için kullanılır. Bu özelliğin alabileceği değerler:

  • flex-start: flex item’lar, flex container’ın solundan başlayarak hizalanır.
  • flex-end: flex item’lar, flex container’ın sağından başlayarak hizalanır.
  • center: flex item’lar, flex container’ın ortasında hizalanır.
  • space-between: flex item’lar, flex container’ın sol ve sağ kenarlarına hizalanır ve aralarında eşit mesafeler bırakılır.
  • space-around: flex item’lar, flex container’ın sol ve sağ kenarlarına hizalanır ve aralarında eşit mesafeler bırakılır. Bu değerde, flex item’ların sol ve sağ tarafında da eşit mesafeler bırakılır.
.container {
  display: flex;
  justify-content: center;
}

Bu kodla .container class’ına sahip olan element, içindeki flex item’ları yatay olarak ortalar.

align-items

align-items özelliği, flex item’ları dikey olarak hizalamak için kullanılır. Bu özelliğin alabileceği değerler:

  • flex-start: flex item’lar, flex container’ın üst tarafından başlayarak hizalanır.
  • flex-end: flex item’lar, flex container’ın alt tarafından başlayarak hizalanır.
  • center: flex item’lar, flex container’ın ortasında hizalanır.
  • stretch: flex item’lar, flex container’ın dikey boyutuna uygun olarak gerilir.
  • baseline: flex item’lar, alt metin hizalamasına göre hizalanır.
.container {
  display: flex;
  align-items: center;
}

  1. Örnek: Bir Yemek Tarifi Sayfası Tasarımı

Aşağıda, CSS Flexbox kullanarak bir yemek tarifi sayfası tasarımı örneği verilmiştir. Bu örnek, birçok farklı özellik ve teknik içerir, ancak temel olarak Flexbox’u kullanarak sayfa düzeni oluşturulmuştur.

HTML yapısı:

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Ana Sayfa</a></li>
        <li><a href="#">Tarifler</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">İletişim</a></li>
      </ul>
    </nav>
  </header>

  <div class="banner">
    <h1>Sebzeli Mercimek Çorbası</h1>
    <p>En lezzetli tarifler burada!</p>
  </div>

  <main>
    <section class="tarif">
      <h2>Sebzeli Mercimek Çorbası Tarifi</h2>
      <ul>
        <li>1 su bardağı kırmızı mercimek</li>
        <li>1 orta boy soğan</li>
        <li>1 havuç</li>
        <li>1 patates</li>
        <li>1 çorba kaşığı tereyağı</li>
        <li>3 su bardağı su veya tavuk suyu</li>
        <li>Tuz, karabiber</li>
      </ul>
      <ol>
        <li>Kırmızı mercimeği yıkayıp süzün ve bir tencereye koyun. Üzerine su ekleyin ve 15 dakika kaynatın.</li>
        <li>Soğanı küçük küpler halinde doğrayın. Havucu ve patatesi küp şeklinde doğrayın.</li>
        <li>Bir tavada tereyağını eritin. Soğanları ekleyin ve kavurun.</li>
        <li>Havuç ve patatesleri ekleyin ve kavurun.</li>
        <li>Mercimeği süzün ve tencereye koyun. Sebzeleri de ekleyin ve karıştırın.</li>
        <li>Üzerine su veya tavuk suyu ekleyin. Tuz ve karabiber ekleyin.</li>
        <li>Kısık ateşte 30-40 dakika kaynatın.</li>
      </ol>
    </section>

    <aside>
      <h3>Püf Noktaları</h3>
      <ul>
        <li>Mercimeği önceden haşlayarak pişirme süresini kısaltabilirsiniz.</li>
        <li>Çorbayı blenderdan geçirerek daha kremsi bir kıvam elde edebilirsiniz.</li>
        <li>Çorbanın üzerine tereyağda kızdırılmış kırmızı pul biber serpebilirsiniz.</li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>Tüm hakları saklidır</p>
Please follow and like us:

Bir yanıt yazın