Flex Box Nedir?

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 44 / 76.

CSS'te Flexbox düzeni, bir kapsayıcıdaki öğeleri hizalamak ve aralarındaki boşluğu dağıtmak için etkili bir yol sunan güçlü bir araçtır. Flexbox ile bir kapsayıcı içindeki öğelerin hizalamasını, yönünü, sırasını ve boyutunu kontrol ederek farklı ekran boyutlarına ve cihazlara uyum sağlayan esnek ve dinamik düzenler oluşturabilirsiniz.

Flexbox'ı kullanmak için önce bir flex kapsayıcısı tanımlamanız gerekir. Bunun için bir öğenin display özelliğini flex veya inline-flex olarak ayarlayın. Bir flex kapsayıcısı oluşturduğunuzda, doğrudan alt öğeleri otomatik olarak flex öğelerine dönüşür.

Esnek bir kapsayıcı oluşturmanın temel sözdizimi şöyledir:

.container {
    display: flex;
}

display: flex;: Bu bildirim, seçilen öğeyi esnek bir kapsayıcıya, doğrudan alt öğelerini ise esnek öğelere dönüştürür.
display: inline-flex;: Satır içi bir esnek kapsayıcı oluşturur: öğe, satır içi bir öğe gibi davranır ancak alt öğeleri, Flexbox'ın tüm özelliklerine sahip esnek öğelere dönüşür.

Bir flex kapsayıcınız olduğunda, flex öğelerinin düzenini kontrol etmek için çeşitli Flexbox özelliklerini kullanabilirsiniz. En sık kullanılan özelliklerden bazıları şunlardır:

flex-direction: Esnek öğelerin yönünü belirtir (row, column, row-reverse, column-reverse).
justify-content: Esnek öğeleri ana eksen boyunca hizalar (ör. flex-start, flex-end, center, space-between, space-around).

align-items: Flex öğelerini çapraz eksen boyunca hizalar (ör. flex-start, flex-end, center, baseline, stretch).
flex-wrap: Flex öğelerinin birden fazla satıra kaydırılıp kaydırılmayacağını belirler (wrap, nowrap, wrap-reverse).
align-content: Çapraz eksende fazladan boşluk olduğunda flex satırlarını hizalar (justify-content ile benzerdir, ancak birden fazla satır içindir).

Görev

Kolay

Size, üç alt bölüm (<div>) içeren bir bölümden (<div>) oluşan bir HTML belgesi veriliyor. Üst bölümü esnek bir kapsayıcıya dönüştürmek için display: flex; özelliğini kullanman gerekiyor. Aşağıdaki adımları izle:

container sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yaz.
.container öğesinin display özelliğini flex olarak ayarla.

Kendin dene

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>