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 öğeler arasında hizalama ve boşluk dağıtımı 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. Bu, bir öğenin display özelliğini flex veya inline-flex olarak ayarlayarak yapılır. Bir flex kapsayıcısı oluşturduğunuzda, doğrudan alt öğeleri otomatik olarak flex öğeleri hâline gelir.

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

.container {
    display: flex;
}

display: flex;: Bu bildirim, seçilen öğeyi esnek bir kapsayıcıya ve doğrudan alt öğelerini esnek öğelere dönüştürür.

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

flex-direction: Flex öğelerinin yönünü belirtir (row, column, row-reverse, column-reverse).
justify-content: Flex öğelerini ana eksen boyunca hizalar (örn. 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 sarılıp sarılmayacağını belirler (wrap, nowrap, wrap-reverse).
align-content: Çapraz eksende boş alan olduğunda flex satırlarını hizalar (justify-content ile benzerdir, ancak birden fazla satır içindir).

Görev

Kolay

Üç alt bölüm (<div>) içeren bir bölüm (<div>) bulunan bir HTML belgeniz var. Üst bölümünü esnek bir kapsayıcıya dönüştürmek için display: flex; özelliğini kullanmanız gerekiyor. Aşağıdaki adımları izleyin:

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

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>