CSS Flex ikişer listeleme

Anonim 1634 gün önce

1,344 defa görüntülendi ve 4 kişi tarafından değerlendirildi

şö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?

css

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (2)

samet

1632 gün önce

Flex değilde Grid buna daha uygun gibi:

.container {

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

}

.box {}

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

</div>

#000036

tayfunerbilen

1634 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.

#000001