Uyumlu Flexbox ve Grid

Bu dersin sonunda kırılma noktası yazmadan kendini ekrana uyduran kart düzenleri ve ekrana göre değişen sayfa yerleşimleri kurabileceksiniz.

Her şey için @media gerekmez

Flexbox ve Grid, içeriğin kapladığı alana göre kendini düzenleyebilir. Doğru birkaç değerle hiç sorgu yazmadan duyarlı düzenler kurabilirsiniz. Bu dersin örneklerinde kod ile önizleme arasındaki ayracı sürükleyip elemanların nasıl yeniden dizildiğini izleyin.

flex-basis ve flex

HTML bölümünde flex: 1 görmüştünüz. Bu aslında üç değerin kısayoludur:

• flex-grow Boş alan varsa ne kadar büyüsün?
• flex-shrink Yer yoksa ne kadar küçülsün?
• flex-basis Başlangıç boyutu ne olsun?

flex: 1 1 150px şunu der: “150 piksel civarında başla, gerekirse büyü, gerekirse küçül.” flex-wrap: wrap ile birleştiğinde bir sıraya kaç öğe sığacağına tarayıcı karar verir.

<div class="liste">
  <div class="oge">Bir</div>
  <div class="oge">İki</div>
  <div class="oge">Üç</div>
  <div class="oge">Dört</div>
</div>

.liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oge {
  flex: 1 1 150px;
  padding: 16px;
  background-color: lightblue;
}

Son satırda kalan öğeler, kalan alanı paylaşmak için genişler. Kartların hep aynı boyutta kalmasını istiyorsanız Grid daha uygundur.

Kendiliğinden sütunlar: auto-fit ve minmax

İnternetteki kart düzenlerinin çoğu tek satırlık şu kalıpla yazılabilir:

<div class="kartlar">
  <div class="kart">1</div>
  <div class="kart">2</div>
  <div class="kart">3</div>
  <div class="kart">4</div>
  <div class="kart">5</div>
</div>

.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.kart {
  padding: 24px;
  background-color: lightgreen;
  text-align: center;
}

Adım adım okuyalım:

• minmax(120px, 1fr) Her sütun en az 120 piksel, boş alan varsa eşit pay.
• repeat(auto-fit, ...) Sığabildiği kadar sütun oluştur.

Burada auto-fit yerine auto-fill da yazabilirsiniz. Fark, öğe sayısı azken ortaya çıkar: auto-fit boş sütunları kapatıp öğeleri genişletir, auto-fill boş sütunları korur.

Dar ekranda 120 piksel bile fazlaysa taşmaması için minmax(min(120px, 100%), 1fr) yazabilirsiniz.

Sayfa düzeni: grid-template-areas

Bölgelere ad vererek yerleşimi metin gibi yazabilirsiniz. Sütun ve satırları hesaplamak yerine haritayı çizersiniz. Önizlemeyi genişletince yan bölüm sağa geçer:

<div class="sayfa">
  <header class="ust">Üst bölüm</header>
  <main class="ana">Ana içerik</main>
  <aside class="yan">Yan bölüm</aside>
  <footer class="alt">Alt bölüm</footer>
</div>

.sayfa {
  display: grid;
  gap: 8px;
  grid-template-areas:
    "ust"
    "ana"
    "yan"
    "alt";
}

.ust { grid-area: ust; background-color: lightblue; }
.ana { grid-area: ana; background-color: khaki; }
.yan { grid-area: yan; background-color: lightgreen; }
.alt { grid-area: alt; background-color: lightpink; }

.sayfa > * {
  padding: 16px;
}

@media (min-width: 500px) {
  .sayfa {
    grid-template-columns: 1fr 140px;
    grid-template-areas:
      "ust ust"
      "ana yan"
      "alt alt";
  }
}

Mobilde bölgeler alt alta durur. Büyük ekranda yalnızca harita değişir, HTML’e dokunulmaz.

Menüyü uyarlamak

Sık görülen bir başka durum üst menüdür. Yer yeterse yan yana, değilse alt alta dizilir. flex-wrap ve justify-content çoğu zaman yeterlidir:

<nav class="menu">
  <a class="logo" href="#">Kulüp</a>
  <ul class="baglantilar">
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Etkinlikler</a></li>
    <li><a href="#">Katıl</a></li>
  </ul>
</nav>

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding: 12px;
  background-color: whitesmoke;
}

.logo {
  font-weight: bold;
}

.baglantilar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

gap: 8px 24px iki değer alır: satırlar arası ve sütunlar arası.

Taşma tuzağı: min-width: 0

Flexbox ve Grid öğeleri varsayılan olarak içeriklerinden daha dar olamaz. İçlerinde uzun bir sözcük veya kod bloğu varsa düzen yana taşar. Öğeye min-width: 0 yazmak bu engeli kaldırır.

<div class="satir">
  <div class="sol">Sol</div>
  <div class="sag">cokuzunbirsozcukcokuzunbirsozcukcokuzunbirsozcukcokuzunbirsozcuk</div>
</div>

.satir {
  display: flex;
  gap: 8px;
}

.sol {
  flex: 0 0 60px;
  background-color: khaki;
}

.sag {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  background-color: lightblue;
}

min-width: 0 satırını silip önizlemeyi daraltırsanız sayfanın yana taştığını görürsünüz.

<style>
  .kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }
</style>

<div class="kartlar">
  <div>A</div>
  <div>B</div>
</div>

<style>
  .liste {
    display: flex;
    flex-wrap: wrap;
  }

  .oge {
    flex: 1 1 150px;
  }
</style>

<div class="liste">
  <div class="oge">Bir</div>
  <div class="oge">İki</div>
</div>

Bu derste öğrendikleriniz

• flex-wrap ve flex-basis öğelerin sığdığı kadar yan yana dizilmesini sağlar.
• repeat(auto-fit, minmax(...)) sorgusuz kart düzenleri kurar.
• grid-template-areas yerleşimi bir harita gibi yazar ve @media ile değiştirilebilir.
• Flexbox ve Grid öğelerinde taşma için min-width: 0 gerekir.