CSS Display-Flex hakkında önemli soru???

20-04-2020, 18:41:53

Merhaba Arkadaşlar, Ben display flex de yeni sayılırım, size sorum aşağıda gördüğünüz 3 numaralı kutunun altına 4 numaralı kutuyu yerleştirmek, yani 4 numaralı kutu 3 numaralı kutunun altında bulduğu boşluğa nasıl girer, aşağıda flex-wrap kullandım, sizce söylediğimi display flex le nasıl yaparım?

<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
</div>

  .container{
display: flex;
flex-wrap:wrap;
}
.box{
color: white;
font-size: 40px;
text-align: center;
flex-direction: column;
}
.box-1{
width: 98%;
height: 200px;
padding: 1%;
background-color: #2456BB;
}
.box-2{
width: 80%;
height: 300px;
background-color: #71318F;
}
.box-3{
width: 20%;
height: 50px;
background-color: #1C8D51;
}
.box-4{
width: 20%;
height: 50px;
background-color: #C89F15;
}
.box-5{
width: 80%;
background-color: #B36428;
        }

21-04-2020, 14:31:17

#2

eryilmazyasin

En basitinden şu şekilde sana hızlıca bir örnek oluşturdum divlere borderları görmen açısından verdim takılma ona. Sana tavsiyem internetten biraz flex grid yapısını araştır veya sıfırdan html css proje yapılışlarını seyret ve uygula kendini en iyi bu şekidle geliştirirsin.

<div class="container">
<div class="nav-box">1</div>
<div class="content-box">
<div class="box-2">2</div>
<div class="side-box">
<div class="box-3">3</div>
<div class="box-4">4</div>
</div>
</div>
<div class="footer-box">5</div>

</div>

div {
border:1px solid black;
}
.content-box {
display:flex;
flex-direction:row;
}

.content-box .side-box {
display:flex;
flex-direction:column;
}

22-04-2020, 18:07:54

#3

sefacandemir

Tüm kutularınıza flex:0 0 1; değeri verin. Daha sonra ana kapsayıcı elemente flex-flow: row wrap; yapın.