Flexbox mı Grid mi — Telefonda Sayfa Neden Yana Kayıyor?

Masaüstünde beş hesap kartı yan yana, tertemiz duruyor. Aynı sayfayı telefonda açınca parmağın sayfayı yana itiyor ve kartların yarısı ekranın dışında kalıyor. Bunu düzeltmek için önce kartları kimin dizdiğini anlamak gerekiyor.

Bir yön mü, iki yön mü?

Flexbox?Terimin tanımını açflexboxÖğeleri tek yönde (satır ya da sütun) dizen CSS düzeni. Öğeler büyüyüp küçülebilir; ama varsayılan olarak içeriklerinden küçük olamazlar.Sözlükte gör → öğeleri tek bir yönde dizer: ya yan yana ya da alt alta. Bir düğme satırı, bir menü, bir kartın içindeki ikon ve yazı flexbox’ın işidir.

Grid?Terimin tanımını açCSS gridSatır ve sütunu birlikte kuran iki boyutlu CSS düzeni. Sütunlar bir kez tanımlanır, bütün öğeler aynı ızgaraya oturur.Sözlükte gör → satırları ve sütunları birlikte kurar. Bir kart galerisi ya da sayfanın ana iskeleti gibi iki boyutlu düzenlerde parlar.

Flex öğesi neden küçülmüyor?

min-width: 0 yazarsan taşma durur ama kartlar içeriklerinden dar kalır ve yazılar ezilir. Çoğu zaman asıl çözüm, kartları alt satıra geçirmektir.

Sarmak mı, ızgara mı?

flex-wrap: wrap sığmayan kartı alt satıra geçirir. Ama her satırı ayrı ayrı doldurur: tablette üst satırda üç, alt satırda iki kart varsa alttakiler daha geniş olur.

Grid’de repeat(auto-fit, minmax(200px, 1fr)) sütun sayısını ekrana bırakır ve bütün kartları aynı genişlikte tutar. Kısa son satırda yalnızca boş bir hücre kalır.

Kendin gör

.list { display: flex; gap: 16px }  .card { flex: 1 }

1. Varsayılanla oynat. Telefonda tek satır: 1064px’lik içerik 320px’lik ekrana sığmadı.
2. “min-width: 0” seç. Taşma bitti ama kartlar ezildi.
3. flex-wrap’e geç, ekranı tablet yap. Alt satırdaki iki kart daha geniş.
4. grid’e geç. Bütün kartlar aynı genişlikte, bir hücre boş.
5. Masaüstünü dene. Dört düzen de tek satıra sığdı.

Tuzaklar

İç içe flex. Bir flex öğesinin içinde uzun, bölünmeyen bir yazı varsa (bir ayar adı, bir link) o öğe de küçülmez. Kapsayan öğeye min-width: 0, yazıya overflow-wrap: anywhere gerekir.

Her şeyi grid yapmak. Bir ikon ve bir yazıyı yan yana koymak için grid kurmak gereksizdir. Tek sıra flex’in işidir.

Sabit genişlik. Kartlara width: 300px yazmak, 320px’lik ekranda kenar boşluklarıyla birlikte taşar. Sabit yerine en az ve en çok sınır ver.

Aşağıdaki örnek bir bankacılık uygulamasının hesaplar ekranından: kart galerisi grid, kartın içi flex.

1
/* Outside: a gallery — rows and columns together. */
2
.account-grid {
3
  display: grid;
4
  gap: 1rem;
5
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
6
}

1
/* Inside: one row — icon, name, balance. */
2
.account-card {
3
  display: flex;
4
  align-items: center;
5
  gap: 0.75rem;
6
}
7

8
.account-card__text {
9
  min-width: 0;                 /* let this item shrink below its content */
10
}
11

12
.account-card__iban {
13
  overflow-wrap: anywhere;      /* a 26-character IBAN may break on a phone */
14
}
15

16
.account-card__balance {
17
  margin-left: auto;            /* push the balance to the right edge */
18
  white-space: nowrap;
19
}

1
interface AccountGridProps {
2
  accounts: readonly Account[];
3
}
4

5
export function AccountGrid({ accounts }: AccountGridProps) {
6
  return (
7
    <ul className="account-grid">
8
      {accounts.map((account) => (
9
        <li key={account.iban} className="account-card">
10
          <AccountIcon kind={account.kind} />
11
          <div className="account-card__text">
12
            <p>{account.name}</p>
13
            <p className="account-card__iban">{account.iban}</p>
14
          </div>
15
          <p className="account-card__balance">{formatMoney(account.balance)}</p>
16
        </li>
17
      ))}
18
    </ul>
19
  );
20
}

Kendini sına