CSS Flexbox ve Grid yerleşim özelliklerini görsel arayüzle deneyin, canlı önizleyin ve CSS kodunu kopyalayın.
Bir elemana tıklayarak özelliklerini düzenleyebilirsiniz.
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}CSS Flexbox ve Grid, modern web sayfalarında yerleşim (layout) oluşturmanın en güçlü iki yöntemidir. Bu araç ile her iki yerleşim modelini görsel olarak deneyebilir, özellik değerlerini gerçek zamanlı önizleyebilir ve oluşturulan CSS kodunu projenize kopyalayabilirsiniz.
Flexbox (Esnek Kutu Modeli), tek boyutlu yerleşimler için tasarlanmıştır. Elemanları yatay veya dikey eksende hizalayabilir, aralarındaki boşluğu dağıtabilir ve sıralama ile boyutlandırma kontrolü sağlayabilirsiniz. Navigasyon çubukları, kart satırları ve form düzenleri için idealdir.
CSS Grid, iki boyutlu yerleşimler için tasarlanmış güçlü bir modeldir. Satır ve sütunları tanımlayarak karmaşık sayfa düzenleri oluşturabilirsiniz. Elemanları grid hücrelerine yerleştirebilir, birden fazla sütun veya satırı kapsayacak şekilde genişletebilirsiniz.
Üst kısımdaki sekmelerden Flexbox veya CSS Grid modunu seçin. Kapsayıcı özelliklerini butonlar ve kaydırıcılarla ayarlayın. Önizleme alanındaki renkli kutulara tıklayarak eleman bazlı özellikleri düzenleyin. "+ Eleman Ekle" butonu ile yeni elemanlar ekleyebilir, seçili elemanı silebilirsiniz. En alttaki CSS kodunu "Kopyala" butonuyla panoya alın.