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 container içindeki items arasında alanı verimli bir şekilde align etmenizi ve dağıtmanızı sağlayan güçlü bir araçtır. Flexbox ile bir container içindeki öğelerin align değerini, direction değerini, 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 önce bir flex kapsayıcı tanımlaman gerekir. Bu, bir öğenin display özelliğinin flex veya inline-flex olarak ayarlanmasıyla yapılır. Bir flex kapsayıcı oluşturduğunda, onun doğrudan alt öğeleri otomatik olarak flex öğeleri olur.

Bir flex container oluşturmak için temel sözdizimi şöyledir:

.container {
    display: flex;
}

display: flex;: Bu bildirim, seçilen öğeyi bir flex container'a ve onun doğrudan alt öğelerini flex items'a dönüştürür.

Bir flex container'ınız olduğunda, flex items öğ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üme (<div>) sahip bir HTML belgesi veriliyor. Göreviniz, üst bölümü bir flex container'a 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>