Flexbox Düzenleyicisi

Görsel olarak bir flex kapsayıcısı oluşturun ve eşleşen CSS'i kopyalayın. Yönü geçiş yapın (row, column, row-reverse, column-reverse), justify-content (space-evenly dahil altı seçenek), align-items (stretch ve baseline dahil), flex-wrap, gap ve önizleme öğesi sayısını — canlı önizleme ve kod paneli anında güncellenir.

1. Özellikler kartındaki düğmelere tıklayarak flex-direction, justify-content, align-items ve flex-wrap seçin. 2. Gap kaydırıcısını (0–32px) sürükleyerek öğeler arasındaki boşluğu ayarlayın. 3. Öğe kaydırıcısını (1–12) sürükleyerek önizleme kutuları ekleyin veya çıkarın. 4. Üstteki canlı önizlemeyi izleyin, ardından Kopyala'ya tıklayarak tam flex bildirim bloğunu kopyalayın.

direction: row | column | row-reverse | column-reverse. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly. align-items: flex-start | flex-end | center | stretch | baseline. flex-wrap: nowrap | wrap | wrap-reverse. gap px cinsindendir. Çıktı, değerlerin varsayılan olup olmadığına bakılmaksızın her zaman display: flex artı beş özelliği yayar.