v2.1.1
Giriş yap

CSS Flex ikişer listeleme

şöyle bir yapım var;

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

şöyle de css kodum var;

.container {
    display: flex;
    .box {
        width: 50%;
    }
}

ancak hepsi yan yana geliyor, ikişer ikişer nasıl gösterebilirim?

Cevaplar
tayfunerbilen
394 gün önce

Bunun için flex-wrap: wrap kullanabilirsin. Yani;

.container {
    display: flex;
    flex-wrap: wrap;
    .box {
        width: 50%;
    }
}

böylece 50% dediğin için 100%lük bir alana max. 2 tane sığacaktır. Taşanlar ise alta gelecektik ve ikişer ikişer gösterecektir.

samet
392 gün önce

Flex değilde Grid buna daha uygun gibi:

.container {

display:grid;
gap:2em;
grid-template-columns: 1fr 1fr;

}

.box {}

<div class="container">

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

</div>

Önce Burayı Okuyun!
Cevap yazarken markdown kod yazımını kullanmanız gerekiyor. Nasıl kullanacağınızı bilmiyorsanız buradaki makaleye gözatın!
Cevap yaz