Bu kılavuzda, Flexbox ile bir Flex Konteyneri içindeki öğeleri ana eksen boyunca nasıl hizalayabileceğinizi öğreneceksiniz. Daha önce çapraz eksen boyunca hizalanmayı ele aldık ama ana eksen de önemlidir. Flexbox teknolojisi, öğeleri esnek ve uyarlanabilir bir şekilde hizalamanızı sağlayan çeşitli seçenekler sunar. Hadi daha yakından bakalım!
Temel Bilgiler
- Ana eksen boyunca hizalama, justify-content özelliği ile gerçekleştirilir.
- Merkezi, flex-start, flex-end, space-between ve space-around gibi farklı değerler kullanarak düzeninizi ayarlayabilirsiniz.
- Flexbox ayarları, istediğiniz yöndeki öğelerin düzenini doğrudan etkiler.
Adım Adım Kılavuz
1. Flex Konteynerı Başlat
Bir Flex Konteynerı oluşturarak ve Flex Yönünü belirleyerek başlayın. Bu örnekte, Flex Yönünü "satır" olarak ayarlıyoruz. Bu, öğelerin soldan sağa sırayla dizilmesi anlamına gelir.
2. Öğelerin Standart Hizalanması
Öğelerinizi özel bir stil ayarı yapmadan konteynere yerleştirirseniz, onları varsayılan olarak konteynerin başında hizalı görürsünüz. Onlara 100 piksel genişlik verebilir ve gösterilebilir hale getirebilirsiniz.
3. Orta Hizalama
Öğeleri ortalamak için, CSS özelliği olan justify-content'i center değeriyle kullanırsınız. Bu, öğelerin konteynerin ortasında hizalanmasını sağlar ve çok şık bir düzen oluşturur.
4. Öğeleri Sona Hizalama
Öğelerinizi konteynerin sonunda hizalamak istiyorsanız, justify-content için flex-end değerini kullanabilirsiniz. Bu, öğeleri konteynerinizin sağ ucuna taşır.
5. Başlangıçta Öğeleri Hizalama
Düzenleme yapmadan önceki varsayılan davranış flex-start'tır, bu da öğelerin konteynerin başında kalacağı anlamına gelir. Bu ayar, öğelerin konteynerin üst kısmında net, düzenli bir şekilde yerleştirilmesini istiyorsanız kullanışlıdır.
6. Flex Yönünü Değiştirme
Flex Yönünü column olarak değiştirirseniz, ana eksen yataydan dikeye değişir. Bu, öğelerin artık yukarıdan aşağıya doğru sıralanmasını sağlar.
7. Dikey Hizalama ile Öğeleri Ortalamak
Yeni hizalamada öğeleri de ortalayabilirsiniz, bunun için justify-content: center kullanırsınız. Bu ayar, tüm öğelerin konteynerin ortasına yerleştirilmesini sağlar.
8. Alttaki Uçağı Hizalama
Öğelerinizi konteynerin alt kısmına yerleştirmek isterseniz tekrar flex-end ayarını yapabilirsiniz. Bu, öğeleri konteynerin alt kenarına yerleştirir.
9. Space Özelliklerini Kullanma
Flexbox ayrıca, space-between, space-around ve space-evenly kullanarak öğeleriniz arasındaki boşluğu kontrol etmenizi sağlar. Bu özellikler, mevcut boşluğu farklı şekillerde dağıtır.
10. Space-Between Kullanımı
justify-content: space-between ile, ilk öğenin üst kenarda ve son öğenin alt kenarda kalacağı, öğeler arasındaki boşluğun eşit şekilde dağıtılacağı bir düzen oluşturulur.
11. Space-Around deneyin
Space-around kullandığınızda, her öğe etrafında eşit miktarda boşluk oluşturulur. Bu mesafe, öğelerin eşit olarak dağıldığı şekilde merkezde ortaya çıkar.
12. Space-Evenly kullanma
Space-evenly kullanarak, öğeler arasındaki her noktada ve konteynerin kenarı arasında daha dengeli bir boşluk olacağından emin olabilirsiniz.
Özet
Bu kılavuzda, Flexbox kullanarak ana eksen hizalamasını nasıl ayarlayabileceğinizi öğrendiniz. Justify-content kullanarak öğelerinizin konumunu çok esnek bir şekilde düzenleyebilirsiniz. Ayrıca, istediğiniz düzeni elde etmenize yardımcı olacak çeşitli özellikleri öğrendiniz. Çekici ve kullanıcı dostu tasarımlar oluşturmak için bu bilgileri kullanın!
Sıkça Sorulan Sorular
Flexbox nedir?Flexbox, bir konteyner içindeki öğeleri esnek bir şekilde düzenlemenizi sağlayan bir CSS düzen modülüdür.
justify-content nasıl çalışır?justify-content özelliği, Flex konteynerindeki öğeler arasındaki boşluğun ve etrafındaki boşluğun nasıl dağıtılacağını belirler.
Hangi Flex yönlerini kullanabilirim?Öğelerin konteyner içindeki düzenini kontrol etmek için sırayla, sıra-ters, sütun ve sütun-ters kullanabilirsiniz.
space-between ve space-around arasındaki fark nedir?space-between, ilk ve son öğeleri konteynerin kenarına yerleştirirken, space-around her öğe etrafında eşit miktarda boşluk oluşturur.
