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 alanı hizalamak ve dağıtmak için etkili bir yol sağlayan 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 edebilir; farklı ekran boyutlarına ve cihazlara uyum sağlayan esnek ve dinamik düzenler oluşturabilirsin.

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

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

.container {
    display: flex;
}

display: flex;: Bu bildirim, seçilen öğeyi bir flex kapsayıcısına ve doğrudan alt öğelerini flex öğelerine dönüştürü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: Flex öğelerinin yönünü belirtir (row, column, row-reverse, column-reverse).
justify-content: Flex öğelerini ana eksen boyunca hizalar (ör. flex-start, flex-end, center, space-between, space-around).

align-items: Esnek öğeleri çapraz eksen boyunca hizalar (ör. flex-start, flex-end, center, baseline, stretch).
flex-wrap: Esnek öğelerin birden fazla satıra sarılıp sarılmayacağını denetler (wrap, nowrap, wrap-reverse).
align-content: Çapraz eksende fazladan alan olduğunda esnek satırları hizalar (birden fazla satır için justify-content ile benzer).

Görev

Kolay

Size, üç alt bölüm (<div>) içeren bir bölüm (<div>) bulunan bir HTML belgesi veriliyor. Göreviniz, üst bölümü bir flex kapsayıcısına dönüştürmek için display: flex; özelliğini kullanmaktır. 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>