CSS Flexbox: tek yönlü yerleşimler

Kısaca: Flexbox öğeleri bir satırda veya sütunda düzenler, boş alanı dağıtır ve hizalar. Menüler, kart sıraları ve ortalanmış içerikler için standart araçtır.

Biraz daha ayrıntılı: Bir kapsayıcıyı display: flex ile “flex kutusu” yaparsın. Doğrudan çocukları flex öğeleri olur ve kapsayıcının kurallarını izler.

Ayrıntılı

• Ana eksen: flex-direction: row (varsayılan) veya column. Çapraz eksen buna diktir.
• Hizalama: justify-content ana eksen boyunca dağıtır (flex-start, center, space-between, space-around). align-items çapraz hizalar (stretch, center, flex-start).
• Boşluk: gap: 1rem kenar boşluğu hileleri olmadan aralıklar koyar.
• Satır kaydırma: flex-wrap: wrap öğelerin sonraki satıra kaymasına izin verir.
• Büyüme ve küçülme: flex: 1 bir öğenin boş alanı doldurmasını sağlar, flex: 0 0 200px sabit genişlik verir. Açık hâli: flex-grow, flex-shrink, flex-basis.
• Ortalama: display:flex; justify-content:center; align-items:center; bir çocuğu yatay ve dikey ortalar.
• Ne zaman Grid? İki boyutlu ızgaralar (aynı anda satırlar ve sütunlar) için CSS Grid daha iyidir. Flexbox tek yön içindir.

Ayrıca bak: CSS, Medya sorguları