justify-content
Öğeleri ana eksende dağıtır. Ana eksen flex-direction değerini izler; row ve column yönü değiştirir.
Flexbox oyun alanı
🐸🐸🐸
.pond {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
}Hizalama hata ayıklayıcı
Ana eksen →Çapraz eksen ↓
justify-content → ana eksen; align-items → çapraz eksen.
Gölet görevi
Tüm kurbağaları nilüferlerin ortasına yerleştir.
🐸🐸🐸
Özellik rehberi
align-items
Her öğeyi kendi flex satırında çapraz eksende hizalar.
align-content
flex-wrap ile oluşturulan çok satırlı kapsayıcıda flex satırlarını dağıtır. İçerik o anda tek satıra sığsa bile sarılan kapsayıcıyı etkileyebilir.
flex
Her öğenin büyüme, küçülme ve başlangıç boyutunu birleştirir.