Flexbox
- Temel Kavramlar:
- Flex Container: display: flex; veya display: inline-flex; ile tanımlanan öğe. Düzeni kontrol eden özelliklere sahiptir.
- Flex Item: Flex container içindeki doğrudan alt öğelerdir ve düzenlenirler.
- Flex Container Özellikleri:
- flex-direction: Öğelerin düzenleme yönünü belirler (row, column, row-reverse, column-reverse).
- justify-content: Flex container içindeki öğeleri ana eksen boyunca nasıl hizalayacağını belirler (flex-start, flex-end, center, space-between, space-around, space-evenly).
- align-items: Öğeleri çapraz eksen boyunca nasıl hizalayacağını belirler (stretch, flex-start, flex-end, center, baseline).
- align-content: Çoklu satırlı flex container’daki satırları çapraz eksen boyunca nasıl hizalayacağını belirler. (Tek satırda kullanıldığında etkisi olmaz.)
- Flex Item Özellikleri:
- flex-grow: Öğenin boş alanı ne kadar büyüteceğini belirler.
- flex-shrink: Öğenin boş alanı ne kadar küçülteceğini belirler.
- flex-basis: Öğenin başlangıç boyutunu belirler (genellikle genişlik veya yükseklik).
- order: Öğelerin sırasını değiştirir.
- align-self: Öğenin çapraz eksen boyunca hizalamasını geçersiz kılar.
Grid Layout
- Temel Kavramlar:
- Grid Container: display: grid; veya display: inline-grid; ile tanımlanan öğe. Düzeni kontrol eden özelliklere sahiptir.
- Grid Item: Grid container içindeki doğrudan alt öğelerdir ve düzenlenirler.
- Grid Container Özellikleri:
- grid-template-columns: Sütunların sayısını ve genişliklerini tanımlar (örnek: 1fr 2fr 1fr). fr birimi, kullanılabilir boşluğun fraksiyonel birimini temsil eder.
- grid-template-rows: Satırların sayısını ve yüksekliklerini tanımlar.
- grid-gap: Sütunlar ve satırlar arasındaki boşluğu belirler (kısayol: grid-row-gap, grid-column-gap).
- Grid Item Özellikleri:
- grid-column-start, grid-column-end: Öğenin sütun başlangıç ve bitiş konumlarını belirtir.
- grid-row-start, grid-row-end: Öğenin satır başlangıç ve bitiş konumlarını belirtir.
- grid-area: Öğeyi bir alana yerleştirir (birden fazla satırı veya sütunu kapsayabilir).
Kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS