v2.5.2
Giriş yap

CSS Flex ikişer listeleme

Anonim
1,345 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?

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