Flexbox Playground

CSS Flexbox'ı görsel olarak deneyin.

1
2
3
Clic en un item para editarlo

Contenedor flex

gap8px
/* Contenedor */
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

Etkilesimli CSS Flexbox deneme alani

CSS Flexbox (Esnek Kutu Duzeni), modern web gelistirmede en guclu ve en cok kullanilan duzen sistemlerinden biridir. Karmasik ve duyarli duzenleri minimum CSS koduyla olusturmaniza olanak tanir.

Flexbox deneme alanimiz, flex kapsayicisinin tum ozellikleriyle gorsel olarak deneme yapmaniza olanak tanir: flex-direction, justify-content, align-items, flex-wrap, gap ve daha fazlasi. Her ozelligin ogelerin dagitimini nasil etkiledigini aninda gorebilirsiniz.

On izleme gercek zamanli olarak guncellenir ve her ozelligin oge dagitimini nasil etkiledigini aninda gormenize olanak tanir. Olusturulan CSS kodunu kopyalayabilir ve dogrudan projenizde kullanabilirsiniz.

Sıkça sorulan sorular

Flexbox mu yoksa Grid mi kullanmaliyim?

Flexbox, tek boyutlu duzenler (tek satir veya tek sutun) icin idealdir, ornegin gezinme cubuklar, yatay kart listeleri veya bir kapsayici icindeki oge hizalamasi. CSS Grid, iki boyutlu duzenler (satirlar ve sutunlar ayni anda) icin daha iyidir, ornegin tam sayfa duzenleri veya karmasik galeriler.

flex-grow ne yapar?

flex-grow, bir ogenin kapsayicidaki kullanilabilir alani doldurmak icin ne kadar buyuyebilecegini tanimlar. 0 degeri (varsayilan) ogenin buyumeyecegi anlamina gelir. Bir oge flex-grow: 1 ve digeri flex-grow: 2 ise, ikincisi birincisinin iki kati buyuyecektir.

Tum tarayicilarla uyumlu mu?

Evet, CSS Flexbox yillardir tum modern tarayicilarda tam destege sahiptir. Chrome, Firefox, Safari, Edge ve Opera onek gerektirmeden destekler. Yalnizca Internet Explorer 10-11 kismi ve hatali bir uygulamaya sahipti.