CSS Flexbox: Temel Kavramlar

CSS Flexbox

Flexbox nedir?

Genellikle flexbox olarak adlandırılan Esnek Kutu Modülü, bir düzen modeli sunarak öğeler arasında alan dağılımı ve güçlü hizalama yetenekleri içeren bir yöntem olarak tasarlanmıştır. Bu makale, bu kılavuzların geri kalanında daha ayrıntılı olarak araştıracağımız flexbox’ın ana özelliklerinin bir özetini verir.

Flexbox’ı tek boyutlu olarak tanımlarken flexbox’ın düzeni aynı anda sadece tek bir boyutta (satır veya sütun olarak) ele aldığını söylüyoruz. Bu yöntem, sütunları ve satırları aynı anda kontrol eden CSS Izgara Düzeni‘nin iki boyutlu modeliyle karşılaştırılabilir.

Flexbox’ın iki ekseni

Flexbox ile çalışırken iki eksen açısından düşünmeniz gerekir – ana eksen ve çapraz eksen. Ana eksen flex-direction özelliği tarafından tanımlanır ve çapraz eksen ona dik olarak çalışır. Flexbox ile yaptığımız her şey bu eksenlere bağlanır, bu nedenle en başta bunların nasıl çalıştıklarını anlamak önemli olacak:

Ana eksen

Ana eksen, dört olası değere sahip olan flex-direction tarafından tanımlanır:

row
row-reverse
column
column-reverse

row veya row-reverse öğesini seçerseniz, ana ekseniniz satır boyunca satır içi olarak çalışır.

Esnek yön satıra ayarlanmışsa, ana eksen satır boyunca satır içi yönde çalışır.

column veya column-reverse seçerseniz ana ekseniniz sayfanın üst kısmından altına — blok yönünde— çalışacaktır.

Esnek yön sütun olarak ayarlanırsa, ana eksen blok yönünde çalışır.

Çapraz eksen

Çapraz eksen ana eksene dik olarak çalışır, bu nedenle flex-direction (ana ekseniniz) row veya row-reverse olarak ayarlanmışsa, çapraz eksen sütunlardan aşağı doğru (column) çalışır.

Ana ekseniniz column veya column-reverse ise çapraz eksen satır boyunca çalışır.

Esnek yön sütun olarak ayarlanırsa, çapraz eksen satır içi yönde çalışır.

Esnek öğeleri hizalamaya ve yaslamaya başladığımızda hangi eksenin hangisi olduğunu anlamak önemli olacaktır; flexbox, içeriği bir eksen boyunca hizalayan ve yaslayan özelliklere sahiptir.

Başlangıç ve bitiş satırları

Bir diğer önemli alan, flexbox’ın belgenin yazma modu hakkında hiçbir varsayımda bulunmadığıdır. Geçmişte, CSS yatay ve soldan sağa yazma modlarına doğru ağırlıklıydı. Modern düzen yöntemleri yazma modları aralığını kapsar ve bu nedenle artık bir metin satırının belgenin sol üst kısmından başlayacağını ve birinin diğerinin altında görünen yeni satırlarla sağ tarafa doğru olacağını varsaymayız.

Flexbox ve Yazma Modları belirtimi arasındaki ilişki hakkında daha fazla bilgiyi daha sonraki bir makalede okuyabilirsiniz; ancak, aşağıdaki açıklama, esnek öğelerimizin aktığı yönü açıklarken neden sol, sağ, üst ve alt şeklinde konuşmadığımızı açıklamaya yardımcı olacaktır.

Eğer flex-direction:row ise ve ben İngilizce bir metin gösteriyorsam, ana eksenin başlangıç ucu solda, bitiş ucu ise sağda olacaktır.

İngilizce çalışırken başlangıç kenarı solda.

Arapça metin gösteriyor olsaydım ana eksenimin başlangıç ucu sağda, bitiş ucu solda olurdu.

Her iki durumda da, her iki dil de yatay yazma moduna sahip olduğundan, çapraz eksenin başlangıç kenarı flex-kutusunun üstünde ve uç kenarı ise alttadır.

Bir süre sonra, sol ve sağ yerine başlangıç ve bitişi düşünmek doğal hale gelir ve aynı desenleri izleyen CSS Grid Layout gibi diğer düzen yöntemleriyle uğraşırken de yararlı olur.

flex-container

Flexbox kullanılarak düzenlenmiş bir alana esnek kutu denir. Esnek bir kutu oluşturmak için, öğenin display özelliğinin değerini flex veya inline-flex olarak ayarlıyoruz. Bunu yaptığımız anda, bu kutunun doğrudan çocukları flex öğeler haline gelir. CSS’deki tüm özelliklerde olduğu gibi, bazı başlangıç değerleri tanımlanır, bu nedenle esnek bir kutu oluştururken, içerdiği tüm esnek öğeler aşağıdaki şekilde davranır:

Öğeler bir satırda görüntülenir (varsayılan).flex-direction:row
Öğeler ana eksenin başlangıç kenarından başlar.
Öğeler ana boyuta uzamaz, ancak küçülebilir.
Öğeler çapraz eksenin boyutunu doldurmak için esner.
Flex-basis özelliği auto olarak ayarlanır.
Flex-wrap özelliği nowrap olarak ayarlanır.

Bunun sonucunda tüm öğeleriniz, ana eksende ve boyutları da içeriklerine göre yerleşir. Kutuya sığabilecekten daha fazla öğe varsa, bunlar alt satıra geçmez, bunun yerine taşar (overflow). Bazı öğeler diğerlerinden daha uzunsa, tüm öğeler tam boyutunu doldurmak için çapraz eksen boyunca uzanır.

Bunun nasıl göründüğünü aşağıdaki örnekte görebilirsiniz. Flexbox’ın ilk davranışını test etmek için öğeleri düzenlemeyi veya ek öğeler eklemeyi deneyin.

          .box {
            display: flex;
          }

        <div class="box">
          <div>One</div>
          <div>Two</div>
          <div>Three
              <br>has
              <br>extra
              <br>text
          </div>
        </div>

Flex yönünü değiştirme

Flex kutuya flex yön özelliğini eklemek, esnek öğelerimizin görüntülenme yönünü değiştirmemizi sağlar. flex-direction: row-reverse olarak ayarlanırsa öğeler satır boyunca görüntülenir, ancak başlangıç ve bitiş uçları değiştirilir.

flex-direction:column ana eksen anahtarlarına geçersek öğelerimiz bir sütunda görüntülenir. column-reverse olarak ayarlanırsa yine başlangıç ve bitiş uçları değiştirilir.

Aşağıdaki örnekte flex-direction, row-reverse olarak ayarlanmıştır. İçeriğe ne olduğunu görmek için diğer değerleri bir html dosyasında deneyebilirsiniz.

    .box {
      display: flex;
      flex-direction: row-reverse;
    }

    <div class="box">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>

flex-wrap ile çok satırlı flex kutular

Flexbox tek boyutlu bir model olsa da, esnek öğelerimizin birden fazla satıra sahip olması mümkündür. Bunu yaparken, her satırı yeni bir esnek kutusu olarak düşünmelisiniz. Herhangi bir alan dağılımı o satırda gerçekleşecektir.

Alt satıra kaydırma davranışına neden olmak için, wrap değeriyle flex-wrap özelliğini ekleyin. Artık öğeleriniz bir satırda görüntülenemeyecek kadar büyükse, başka bir satıra kaydırılır. Aşağıdaki örnek bir genişlik verilmiş öğeleri içerir ve öğelerin toplam genişliği esnek kutu için çok geniş olarak ayarlamıştır. Dolayısıyıla öğeler kaydırılır. no-wrap‘e ayarlarsanız, ki bu aynı zamanda varsayılan değerdir, öğeler kutuya sığacak şekilde küçülürler, çünkü öğelerin küçülmesine izin veren ilk flexbox değerlerini kullanırlar. Öğeler küçülemezse veya sığacak kadar küçülemezse taşmaya neden olur (overflow).

  .box {
    display: flex;
    flex-wrap: wrap;
}

  <div class="box">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
  </div>

Flex Öğelerinin Mastering Wrapping kılavuzunda esnek öğeleri sarmalama hakkında daha fazla şey öğrenebilirsiniz.

flex-flow kısayolu

flex-direction ve flex-wrap özelliklerini ve flex-flow içinde birleştirebilirsiniz. Belirtilen ilk değer flex-direction, ikinci değer ise flex-wrap‘i tanımlar.

  .box {
    display: flex;
    flex-flow: row wrap;
  }

  <div class="box">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
  </div>

Flex öğelere uygulanan özellikler

Esnek öğeler üzerinde daha fazla kontrole sahip olmak için her bir öğeyi doğrudan hedefleyebilirsiniz. Bunu üç özellik tanımıyla yapıyoruz:

Bu özellikleri anlamlandırmadan önce mevcut alan kavramını göz önünde bulundurmamız gerekir. Flex özelliklerin değerini değiştirdiğimizde yaptığımız şey, mevcut alanın öğelerimiz arasında dağıtılma şeklini değiştirmektir. Kullanılabilir alan kavramı, öğeleri hizalamaya baktığımızda da önemlidir.

500 piksel genişliğindeki bir kapta üç adet 100 piksel genişliğinde öğemiz varsa, öğelerimizi düzenlemek için ihtiyacımız olan alan 300 pikseldir. Geriye 200 piksel kullanılabilir alan kalır. Varsayılan olarak flexbox bu alanı son öğeden sonra koyar.

Bu esnek kapsayıcı, öğeleri döşedikten sonra kullanılabilir alana sahiptir.

Bunun yerine öğelerin büyümesini ve alanı doldurmasını istiyorsak, öğeler arasında kalan alanı dağıtmak için bir yönteme sahip olmamız gerekir. İşte flex öğelerine uyguladığımız özelliklerin yapacağı şeydir budur.

flex-basis

flex-basis bir öğenin boyutunu, kullanılabilir alan açısından tanımlayan özelliktir. Bu özelliğin varsayılan değeri auto‘dur — bu durumda tarayıcı, öğelerin bir boyutu olup olmadığını görmek için bakar. Yukarıdaki örnekte, tüm öğelerin genişliği 100 pikseldir ve bu değer flex-basis için kullanılır.

Öğelerin boyutu yoksa, içeriğin boyutu flex-basis olarak kullanılır. Bu nedenle, esnek öğeler oluşturmak için üst öğeye display: flex tanımladığımızda, öğeler bir satıra taşınır ve yalnızca içeriklerini görüntülemek için gereken alan kadar yer kaplarlar.

flex-grow

Bu özellik pozitif bir tamsayıya ayarlıysa öğe flex-basis değerinden ana eksen boyunca büyür. Bu, öğenin bu eksendeki kullanılabilir herhangi bir alanı genişletmesine ve kaplamasına, veya diğer öğelerin de büyümesine izin verildiğinde kullanılabilir alanın bir miktarını almasına neden olur.

Eğer tüm öğelerimize 1 değerini verirsek, flex kutusundaki mevcut alan öğelerimiz arasında eşit olarak paylaşılacak ve ana eksendeki kabı doldurmak için gerilecektir.

Esnek büyüme özelliği boş alanı orantılı olarak dağıtmak için kullanılabilir. İlk öğemize 2, diğer öğelere ise 1’er değer verirsek, ilk öğeye 2 parça, diğer öğelere 1 parça alan verilir.

flex-shrink

flex-grow özelliği ana eksende alan eklerken, flex-shrink özelliği bu alanın nasıl alındığını denetler. Flex kutuda öğelerimizi düzenlemek için yeterli alanımız yoksa ve flex-shrink pozitif bir tamsayıya ayarlanırsa, o zaman öğenin boyutu flex-basis‘den daha küçük olabilir. flex-grow‘da olduğu gibi, bir öğenin diğerlerinden daha hızlı küçülmesini istiyorsak farklı değerler atayabiliriz.

Gerçek küçülme miktarı üzerinde çalışırken öğenin minimum boyutu dikkate alınır, bu da esnek küçülmenin davranışta esnek büyümeden daha az tutarlı görünme potansiyeline sahip olduğu anlamına gelir. Bu nedenle, bu algoritmanın nasıl çalıştığına daha ayrıntılı bir göz atacağız ana eksen boyunca öğelerin oranlarını kontrol etme makalesine bakabilirsiniz.

flex özellikler için kısayol değerleri

flex-grow, flex-shrink ve flex-basis değerlerinin tek tek kullanıldığına nadiren rastlarsınız; bunun yerine flex kısayolları kullanılırlar. Kısayollar, üç değeri bu sırada ayarlamanıza olanak tanır — flex-grow, flex-shrink, flex-basis

Aşağıdaki örnek, flex kısayollarının farklı değerlerini gösterir. flex-grow‘a pozitif bir değer vermek, öğenin büyüyebileceği anlamına gelir. İkincisi — pozitif bir değerle öğeler küçülebilir, ancak yalnızca toplam değerleri ana ekseni taşarsa. Son değer; bu, öğelerin büyümek ve küçülmek için temel değerleri olarak kullandıkları değerdir.

  .box {
    display: flex;
  }

  .one {
    flex: 1 1 auto;
  }

  .two {
    flex: 2 1 auto;
  }

  .three {
    flex: 3 1 auto;
  }

  <div class="box">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
  </div>

Kullanım örneklerinin çoğunu kapsayan önceden tanımlanmış bazı kısayol değerleri de bulunur:

flex: initial
flex: auto
flex: none
flex: <positive-number>

flex:initial ayarı, öğeyi Flexbox’ın başlangıç değerlerine sıfırlar. Bu flex:0 1 auto ile aynı şeydir. Bu durumda flex-grow değeri 0’dır, bu nedenle öğeler boyutlarından daha büyüyemezler. flex-shrink değeri 1’dir, bu nedenle öğeler taşmak yerine gerekirse küçülebilirler. flex-basis değeri şudur: Öğelerin boyutları içerik boyutundan alınır.

Kullanmak, kullanmakla aynıdır; her şey olduğu gibi ama bu durumda öğeler büyüyebilir ve kabı doldurabilir ve gerekirse küçülebilir.flex: autoflex: 1 1 autoflex:initial

flex:auto, flex:1 1 auto ile aynıdır. flex:none ise flex: 0 0 auto ile aynıdır.

Öğreticilerde sık sık gördüğünüz kısayol ise flex:1, flex:2 veya benzeridir. Bu da flex:1 1 0 ile aynıdır.

  .box {
    display: flex;
  }

  .one {
    flex: 1;
  }

  .two {
    flex: 4;
  }

  .three {
    flex: 2;
  }

  <div class="box">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
  </div>

Öğeler arasında hizalama, yaslama ve boş alan dağılımı

Flexbox’ın önemli bir özelliği, de ana ve çapraz eksenlerdeki öğeleri hizalama ve yaslama yaparak esnek öğeler arasında boşluk dağıtma yeteneğidir. Bu özelliklerin öğelerin kendisinde değil, esnek kutuya ayarlanacağını unutmayın.

align-items

align-items özelliği öğeleri çapraz eksende hizalar.

Bu özelliğin başlangıç değeri stretch‘tir ve bu nedenle esnek öğeler varsayılan olarak esnek kutunun yüksekliğine uzanır. Bu, kutudaki en uzun öğenin yüksekliği veya esnek kutunun kendisi üzerinde ayarlanan bir boyut tarafından dikte edilebilir.

Bunun yerine, öğeleri esnek kutunun başına, sonuna veya ortasına hizalamak için align-items özelliğini sırasıyla flex-start, flex-end, ya da center ayarlayabilirsiniz.

stretch
flex-start
flex-end
center

    <div class="box">
      <div>One</div>
      <div>Two</div>
      <div>Three
          <br>has
          <br>extra
          <br>text
      </div>
    </div>

      .box {
        display: flex;
      }

      .box {
        display: flex;
        align-items:center;
      }

justify-content

justify-content özelliği, ana eksendeki öğeleri flex-direction yönünde hizalamak için kullanılır. Başlangıç değeri, öğelerin flex kutusunun başlangıç kenarında hizalayacağı şekildedir. Ancak öğeleri sonda veya ortada sıralamak için de flex-end veya center değerlerini ayarlayabilirsiniz.

Ayrıca, öğeler yerleştirildikten sonra tüm boş alanı öğeler arasında eşit olarak paylaştırmak için de kullanabileceğiniz değerler bulunur. Her öğenin sağında ve solunda eşit miktarda alana neden olmak için space-around değerini kullanabilirsiniz. space-around ile öğelerin her iki ucunda da yarım boyutlu bir boşluk vardır. Veya, öğelerin çevrelerinde eşit alana sahip olmasına neden olmak için space-evenly değeri kullanın.

justify-content aşağıdaki değerleri alabilir:

flex-start
flex-end
center
space-around
space-between
space-evenly

      .box {
        display: flex;
        justify-content: space-around;
      }

      .box {
        display: flex;
        justify-content: center;
      }

Mozilla’nın Flex Öğeleri Hizalama makalesini bu özelliklerin nasıl çalıştıklarını daha iyi anlamak için inceleyebilirsiniz. Ancak bu basit örnekler de yararlı olacaktır.

Sonraki adımlar

Bu makaleyi okuduktan sonra Flexbox’ın temel özelliklerini anlamalısınız. Dilerseniz flexbox’un CSS ‘nin diğer hizalama yöntemleri ilişkisine bakabilirsiniz.