Flex Box Meydan Okuması

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

Görev

Kolay

display: flex;, flex-direction, justify-content ve align-items dahil olmak üzere Flexbox'ın temellerinde ustalaştığınıza göre, şimdi bilginizi kapsamlı bir meydan okuma ile test etme zamanı. Bu meydan okuma, esnek ve duyarlı düzenler oluşturmak için bu özellikleri birlikte nasıl kullanacağınız konusundaki anlayışınızı pekiştirmenize yardımcı olacaktır. Belirli bir tasarımı yeniden oluşturmak için her bir özellik hakkında öğrendiklerinizi uygulayacaksınız.

Dört çocuk bölme (<div>) içeren bir ebeveyn bölmeye (<div>) sahip bir HTML belgesi size verilmiştir. Göreviniz, bu öğeleri aşağıdaki resimde gösterilen tasarımla eşleşecek şekilde stillendirmek için öğrendiğiniz Flexbox özelliklerini kullanmaktır:

Aşağıdaki adımları izleyin:

container sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın.
.container öğesini bir esnek kapsayıcıya dönüştürmek için display özelliğini flex olarak ayarlayın.
Esnek öğeleri sağdan sola bir satırda düzenlemek için .container öğesinin flex-direction özelliğini row-reverse olarak ayarlayın.
Esnek öğeleri aralarında boşluk olacak şekilde eşit olarak dağıtmak için .container öğesinin justify-content özelliğini space-between olarak ayarlayın.
Esnek öğeleri çapraz eksenin sonunda hizalamak için .container öğesinin align-items özelliğini flex-end olarak ayarlayın.
Resimde gösterildiği gibi farklı arka plan renkleri ve boyutları (farklı dolgular kullanarak) ile bireysel esnek öğeleri (item1, item2, item3, item4) stillendirmek için CSS kuralları yazın.

Kendin dene

<html>
<head>
    <title>Flex Box Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
        <div class="item4">Item 4</div>
    </div>
</body>
</html>