Css Flex Kullanımı

   · ☕ 6

   Flex özellikle karmaşık projelerde web geliştiricilerinin işini kolaylaştıran, web sitesindeki elamanları yatayda ve dikeyde hizalamaya yarayan ve günümüzde oldukça popüler olan CSS layoutlarından biridir

   Flex’i kullanmamızın en büyük sebebi, yapıya esneklik verdiği için,esnek yapıları kolayca yönetmek için, yatay ve dikey hizalarda nasıl görüneceğini, öğelerin kendi içinde hizalanmalarını ve sırasını belirlemek gibi güzel özellikleri bulunuyor. Ayrıca tüm cihazlarda daha hızlı ve esnek bir yapı kullanmak için, flex bizim tamda ihtiyacımız olan şey.

   Flexbox modülünün ana fikri arkasında kullanılabilir boş alana öğeleri en iyi şekilde pozisyonlamak olarak tanımlanabilir.

Container (Esnek Kapsayıcı) Özellikleri

  1. display: flex || inline-flex
    • Flex layoutunun özelliklerini kullanmak için flex konteyneri oluşturulur.
  2. flex-direction: row || row-reverse || column || column-reverse
    • Nesnelerin hangi yönde yerleştireleceğini belirler.(Default-row)
  3. 1
    2
    3
  4. flex-wrap: nowrap || wrap || wrap-reverse
    • Birden fazla satırda gösterilecek öğelerin nasıl bir davranış sergileyeceğini belirlemek için kullanılır.
  5. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
  6. flex-flow: row, row-reverse, column, column-reverse || nowrap, wrap, wrap-reverse
    • Yukarıdaki bahsettiğimiz iki özelliğin(flex-direction ve flex-wrap) kısayoludur. İki özelliği tek bir tanım ile tanımlama imkanı verir
  7. justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly;
    • Nesneleri yatayda hizalamaya yarar.
  8. 1
    2
    3
    4
  9. align-items: stretch || flex-start || center || flex-end || baseline
    • Nesneleri dikeyde hizalamaya yarar.
  10. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
  11. align-content: stretch || flex-start || flex-end || center || space-between || space-evenly
    • align-itemsten farkı çoklu satır yapılarında kullanılır.

Items(Esnek Öğe) Özellikleri

  1. order: order: 1 || order: 3 || order: 2
    • Öğelerin sıralanışını değiştirmek için kullanılır.
  2. A
    order : 1
    B
    order : 2
    C
    order : 3
    D
    order : 4
    E
    order : 5
  3. flex-grow: flex-grow: 1 || flex-grow: 3
    • Bir öğeyi diğerlerine göre daha büyük göstermek için bu özellik kullanılır.Varsayılan olarak değeri 0’dir
  4. A
    B
    C
  5. flex-shrink: flex-shrink : flex-shrink: 2 || flex-shrink: 1
    • flex-grow özelliğinin tam aksine, küçültme işlemi için kullanılır. Varsayılan olarak değeri 1’dir
  6. A
    B
    C
  7. flex-basis: flex-basis: 40% ||flex-basis: 20%
    • Öğelerin eğer alanı yetiyorsa olması gereken genişliği belirlemek için kullanılır. Varsayılan olarak değeri auto’dur.
  8. A
    B
    C
    D
    E
  9. flex: flex: 1 1 auto
    • Sırasıyla flex-grow, flex-shrink ve flex-basis özelliklerinin kısa kullanımıdır.İlk değeri zorunlu olup (shrink ve basis) değerlerini belirtmek zorunlu değildir. Varsayılan olarak 0 1 auto değerine sahiptir.
  10. align-self: align-self: auto || flex-start || flex-end || center || baseline || stretch
    • align-content ile aynı işlemleri yapar. Dikey eksende öğelerin nasıl hizalanacağı belirlenir. Tek farkı kapsayıcı yerine bunu öğelere uygulamasıdır.
  11. A
    B
    C
Beğendiysen fazla değil sadece 1 dakikanı ayırıp paylaşabilir misin? Desteğin çok teşekkürler.

Ferdi Gökdemir
Ferdi Gökdemir
Developer