Flexboxが8列の50％幅列が正しく表示されない

Question

Flexboxを使用して、同じ高さの50％幅の列を作成しようとしています。私は

.items { 
 
     display: flex; 
 
     flex-wrap: wrap; 
 
} 
 

 
.item { 
 
    padding: 10px; 
 
    width:50%; 
 
     margin: 10px; 
 
     background: aqua; 
 
       
 
}

<div class="items"> 
 
    <div class="item">llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum. Nullam commodo, magna sit amet sdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
</div>

....これを持っているちょうど私が間違って何をやっている、1列に表示されますか？

Answer 1

あなたはpaddingとmarginを使用するので、アイテムの幅が50％+パディング+余白に等しく、回避策として

、あなたは安全なmin-widthを設定し、flex-grow: 1;

ボックスサイジングをリセットすることができを設定することができmin-width計算にパディングを含める。

.items { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.item { 
 
    min-width: 40%; 
 
    padding: 10px; 
 
    flex: 1; 
 
    margin: 10px; 
 
    background: aqua; 
 
}

<div class="items"> 
 
    <div class="item">llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam 
 
    at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum. 
 
    Nullam commodo, magna sit amet sdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
</div>

Answer 2

あなたはpaddingとmargin持っているように、それはあなたがbox-sizing: border-boxを追加する必要があり、そしてあなたが1以上のdivに.itemコンテンツをラップすることができマージンを補償するためのパディングを補うために、あなたの.itemのごwidth: 50%に追加します。

.items { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.item { 
 
    padding: 10px; 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
} 
 

 
.item > div { 
 
    padding: 10px; 
 
    background: aqua; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
}

<div class="items"> 
 
    <div class="item"> 
 
    <div>llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam 
 
     at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div>Item 1sadasdasdasdasd</div> 
 

 
    </div> 
 
    <div class="item"> 
 
    <div>Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum. 
 
     Nullam commodo, magna sit amet sdasd</div> 
 

 
    </div> 
 
    <div class="item"> 
 
    <div> Item 1sadasdasdasdasd</div> 
 

 
    </div> 
 
</div>

Answer 3

何が起こっているボックスの幅を50％に設定されていることですが、それは、パディングやマージンが含まれていません。 box-sizing: border-box;を設定すると、50％の埋め込みを含めることができますが、余白を含めることはできません。これを解決する1つの方法は、行内の空白を埋めるためにどれだけ成長できるかを要素に伝えるflex-grow属性を使用することです（すべての要素がflex-grow: 1;の場合、すべて同じ量になります） 。

.items { 
 
     display: flex; 
 
     flex-wrap: wrap; 
 
} 
 

 
.item { 
 
    flex-grow: 1; 
 
    width: 40%; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    background: aqua; 
 
       
 
}

<div class="items"> 
 
    <div class="item">llamcorper id vehicula quis, sollicitudin a nibh. Quisque sed bibendum ipsum, et tempor arcu. Duis ultrices feugiat purus, ut sollicitudin ipsum interdum a. Nam porta vestibulum elit, et feugiat eros viverra et. In hac habitasse platea dictumst. Nullam at tempus libero. Donec pretium risus sit amet lacus imperdiet, vitae lacinia lorem eleifend. Mauris faucibus, dolor vel facilisis ultrices, massa urna tempus urna, vitae euismod felis est nd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1satricies fermentum erat luctus placerat. Praesent cursus nisl vitae magna tristique lacinia ac ac justo. Nunc euismod, est sed sodales lacinia, nisi leo luctus nulla, id commodo lectus sem vel erat. Vivamus id quam id ligula condimentum fermentum. Nullam commodo, magna sit amet sdasd 
 
    </div> 
 
    <div class="item"> 
 
    Item 1sadasdasdasdasd 
 
    </div> 
 
</div>