Flex Box Nedir?

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 44 / 76.

CSS'te, Flexbox düzeni, bir kapsayıcı içindeki öğeler arasında boşluğu hizalamak ve dağıtmak için verimli 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şturabilirsiniz.

Flexbox kullanmak için öncelikle 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 haline gelir.

Bir flex kapsayıcısı oluşturmak için 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 container'a sahip olduğunuzda, flex öğelerinin düzenini kontrol etmek için çeşitli Flexbox özelliklerini kullanabilirsiniz. En yaygın 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 (örneğin, flex-start, flex-end, center, space-between, space-around).

align-items: Flex öğelerini çapraz eksen boyunca hizalar (örneğin, flex-start, flex-end, center, baseline, stretch).
flex-wrap: Flex öğelerinin birden fazla satıra sarmalanıp sarmalanmayacağını kontrol eder (wrap, nowrap, wrap-reverse).
align-content: Çapraz eksende fazladan alan olduğunda flex satırlarını hizalar (justify-content özelliğine benzer ancak birden fazla satır içindir).

Görev

Kolay

Üç alt bölme (<div>) içeren bir bölmeye (<div>) sahip bir HTML belgesi size verilmiştir. Göreviniz, üst bölmeyi bir esnek kapsayıcıya (flex container) 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.

Kopya kağıdı

Bir flex kapsayıcısı oluşturmak için display özelliğini flex olarak ayarlayın:

.container {
    display: flex;
}

Bu, öğeyi bir flex kapsayıcısına ve doğrudan alt öğelerini flex öğelerine dönüştürür.

Düzeni kontrol etmek için yaygın Flexbox özellikleri:

flex-direction: Flex öğelerinin yönü (row, column, row-reverse, column-reverse)
justify-content: Öğeleri ana eksen boyunca hizalar (flex-start, flex-end, center, space-between, space-around)
align-items: Öğeleri çapraz eksen boyunca hizalar (flex-start, flex-end, center, baseline, stretch)
flex-wrap: Kaydırmayı kontrol eder (wrap, nowrap, wrap-reverse)
align-content: Çapraz eksende fazladan alan olduğunda flex satırlarını hizalar

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>