2つのフレックスボックスを1列にセットする

Question

私はこれを長年試みてきましたが、何も動作していないようです。 私は動的に生成しているdivsがあります。今度は、各行にtwo divsしか含まれないようにしたいので、私はflex cssプロパティを使うべきだと読んでいます。しかし、私はそれを正しくしていません。現在、すべてのdivが単一の行に入っています。 はここで事前に任意の助け

.flexbox 
 
{ 
 
    display: flex; 
 
} 
 

 
    
 

 
.flexbox > div 
 
{ 
 
    flex: 1 1 50%; 
 
    padding: 10px; 
 
    width: 20px; 
 
    height: 100px; 
 
}

<div class="flexbox"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
</div>

おかげで私のコードです

Answer 1

フレックスアイテムは複数の行に分割され、さらにbox-sizing: border-boxはeの内側にパディングを保持します礼儀。この場合

* { 
 
    box-sizing: border-box; 
 
} 
 
.flexbox { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.flexbox > div { 
 
    flex: 1 1 50%; 
 
    padding: 10px; 
 
    height: 100px; 
 
}

<div class="flexbox"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
</div>

Answer 2

また、使用することができます幅：50％：あなたが作るためにflex-wrap: wrapを追加する必要があり

div{ 
float:left 
display:inline-block; 
width:50%; 
}